/*
 * Exact Locksmiths: design system and PHP templates (header, footer, town, service, hub).
 * Source of truth: Figma "Exact-Locksmith", pages Foundations / Components / Pages (08.10.2026).
 * Tokens = Figma variables. Mobile first, desktop from 900px. Content width 1200.
 */

/* Fonts: self-hosted variable woff2, latin (OFL). */
@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-latin.woff2") format("woff2");
	font-weight: 700 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Hanken Grotesk";
	src: url("../fonts/hanken-grotesk-latin.woff2") format("woff2");
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Colour */
	--c-navy: #162738;
	--c-blue-dark: #154a73;
	--c-blue-light: #3b93c1;
	--c-call-start: #2a7ab3;
	--c-call-end: #154a73;
	--c-blue-50: #eff6fa;
	--c-blue-100: #e0eef5;
	--c-white: #fff;
	--c-grey-50: #f6f6f7;
	--c-section-grey: #f3f7fa;
	--c-glow: rgba(220, 234, 243, 1);
	--c-grey-200: #e3e5e7;
	--c-grey-600: #5c6874;
	--c-error: #b42318;

	/* Space */
	--s-4: 4px;
	--s-8: 8px;
	--s-12: 12px;
	--s-16: 16px;
	--s-24: 24px;
	--s-32: 32px;
	--s-48: 48px;
	--s-64: 64px;
	--s-96: 96px;

	/* Radius */
	--r-sm: 8px;
	--r-md: 16px;
	--r-lg: 20px;
	--r-xl: 24px;
	--r-photo: 28px;
	--r-pill: 999px;

	/* Effects */
	--shadow-card: 0 1px 3px 0 rgba(22, 39, 56, 0.06), 0 14px 36px -6px rgba(21, 74, 115, 0.14);
	--shadow-sticky: 0 -4px 20px 0 rgba(22, 39, 56, 0.14);
	--shadow-call: 0 10px 12px rgba(21, 74, 115, 0.3);
	--shadow-secondary: 0 8px 10px rgba(22, 39, 56, 0.22);
	--grad-call: linear-gradient(90deg, var(--c-call-start), var(--c-call-end));
	--grad-help: linear-gradient(147deg, var(--c-call-start) 0%, var(--c-call-end) 71%);

	/* Type */
	--f-head: "Archivo", "Arial Narrow", Arial, sans-serif;
	--f-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--t-h1: 34px;
	--t-h2: 27px;
	--t-h3: 19px;
	--t-body: 17px;
	--t-lead: 17px;
	--t-offer: 19px;

	/* Layout */
	--wrap: 1200px;
	--gutter: 16px;
	--section-y: 32px;
}

@media (min-width: 600px) {
	:root {
		--gutter: 32px;
		--section-y: 64px;
	}
}

@media (min-width: 900px) {
	:root {
		--t-h1: 48px;
		--t-h2: 38px;
		--t-h3: 22px;
		--t-body: 18px;
		--t-lead: 20px;
		--t-offer: 24px;
		--section-y: 96px;
	}
}

/* Base (Hello Elementor CSS is not loaded on these templates, see functions.php) */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body.exact {
	margin: 0;
	background: var(--c-white);
	color: var(--c-navy);
	font-family: var(--f-body);
	font-size: var(--t-body);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}


:where(.exact) img {
	display: block;
	max-width: 100%;
	height: auto;
}

:where(.exact) a {
	color: var(--c-blue-dark);
}

:where(.exact) :focus-visible {
	outline: 3px solid var(--c-blue-light);
	outline-offset: 2px;
}

:where(.exact) :is(h1, h2, h3) {
	margin: 0;
	font-family: var(--f-head);
	color: var(--c-navy);
	text-wrap: balance;
}

:where(.exact) h1,
.t-h1 {
	font-size: var(--t-h1);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.015em;
}

:where(.exact) h2,
.t-h2 {
	font-size: var(--t-h2);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.015em;
}

:where(.exact) h3,
.t-h3 {
	font-size: var(--t-h3);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.005em;
}

:where(.exact) p {
	margin: 0;
}

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

.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 1000;
	width: auto;
	height: auto;
	padding: 12px 16px;
	clip: auto;
	background: var(--c-white);
	border-radius: var(--r-sm);
}

.wrap {
	width: 100%;
	max-width: calc(var(--wrap) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.icon {
	display: inline-block;
	flex: none;
	width: 24px;
	height: 24px;
	color: var(--c-blue-dark);
}

.section {
	padding-block: var(--section-y);
}

/* Two sections on the same background read as one gap, not a double one (blocks are added in any order from the admin). */
main > .section:not(.section--grey, .section--navy, .section--blue, .section--panel, .block-areas-table, .faq-jump) + .section:not(.section--grey, .section--navy, .section--blue, .block-areas-table, .faq-jump),
main > .section--grey + .section--grey {
	padding-top: 0;
}

/* The callback panel is its own card on white: after it, one normal gap. */
main > .section--panel + .section:not(.section--grey, .section--navy),
main > .section--tight-bottom:not(.section--grey) + .section:not(.section--grey, .section--navy, .block-areas-table) {
	padding-top: calc(var(--section-y) / 2);
}

.section--grey {
	background:
		radial-gradient(ellipse 60% 50% at 88% 50%, var(--c-glow), rgba(220, 234, 243, 0)),
		var(--c-section-grey);
}

.section--blue {
	background: var(--c-blue-50);
}

.section__head {
	margin-bottom: var(--s-24);
}

.section__head p {
	margin-top: var(--s-12);
	font-size: var(--t-lead);
	line-height: 1.5;
	color: var(--c-grey-600);
}

/* Buttons */
.btn-call {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-12);
	min-height: 52px;
	padding: var(--s-12) 22px;
	border: 0;
	border-radius: var(--r-pill);
	background: var(--grad-call);
	box-shadow: var(--shadow-call);
	color: var(--c-white) !important;
	font-family: var(--f-body);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	max-width: 100%;
	text-align: center;
	transition: filter 0.15s ease, transform 0.15s ease;
}

.btn-call:hover {
	filter: brightness(1.08);
}

.btn-call:active {
	transform: translateY(1px);
}

.btn-call .icon {
	width: 22px;
	height: 22px;
	color: currentColor;
}

.btn-call__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

.btn-call__sub {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	opacity: 0.9;
}

.btn-call--lg {
	min-height: 68px;
	padding-inline: 28px;
	font-size: 22px;
	font-weight: 800;
}

.btn-call--lg .icon {
	width: 26px;
	height: 26px;
}

.btn-call--block {
	width: 100%;
}

.btn-call--light {
	background: var(--c-white);
	color: var(--c-blue-dark) !important;
	transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.btn-call--whatsapp .icon {
	color: #1da851;
}

/* White button on dark cards: brightness() does nothing on white, so it glows and lifts on hover instead. */
.btn-call--light:hover,
.btn-call--light:focus-visible {
	background: var(--c-blue-50);
	box-shadow: var(--shadow-call), 0 0 0 4px rgba(255, 255, 255, 0.35), 0 0 24px rgba(255, 255, 255, 0.45);
	transform: translateY(-1px);
}

@media (min-width: 900px) {
	.btn-call--lg {
		min-height: 72px;
	}

	.hero .btn-call--lg {
		width: 400px;
		max-width: 100%;
	}
}

.btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 var(--s-24);
	border: 0;
	border-radius: var(--r-pill);
	background: var(--c-navy);
	box-shadow: var(--shadow-secondary);
	color: var(--c-white);
	font-family: var(--f-body);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.link-whatsapp {
	display: inline-flex;
	align-items: center;
	gap: var(--s-8);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-blue-dark);
}

.link-whatsapp .icon {
	width: 20px;
	height: 20px;
	color: currentColor;
}

/* Header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--c-white);
	border-bottom: 1px solid var(--c-grey-200);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-16);
	height: 64px;
}

.site-header__logo img {
	width: 118px;
	height: auto;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--s-8);
}

/* Mobile: a wide rectangle with "Call now" (user 14.10.2026), not a round icon. */
.site-header__call {
	width: auto;
	min-width: 132px;
	min-height: 46px;
	padding: 0 var(--s-16);
	border-radius: var(--r-sm);
	box-shadow: none;
	font-size: 16px;
}

.site-header__call {
	gap: var(--s-8);
}

.site-header__call .btn-call__sub {
	display: none;
}

.site-header__call .icon {
	width: 20px;
	height: 20px;
	animation: exact-ring 4s ease-in-out 1s infinite;
}

/* Header call button: the phone icon "rings" for a moment every 4 s. */
@keyframes exact-ring {
	0%, 12%, 100% {
		transform: rotate(0);
	}

	2%, 6%, 10% {
		transform: rotate(-14deg);
	}

	4%, 8% {
		transform: rotate(14deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header__call .icon {
		animation: none;
	}
}

.site-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: var(--r-pill);
	background: transparent;
	cursor: pointer;
	list-style: none;
}

.site-nav__toggle::-webkit-details-marker {
	display: none;
}

.site-nav {
	position: static;
	order: 3; /* mobile: logo, Call, menu (Figma Header / Mobile) */
}

.site-header__actions {
	margin-left: auto;
}

.site-nav-desktop {
	display: none;
}

.site-header__inner {
	gap: var(--s-8);
}

.site-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav[open] .site-nav__list {
	position: absolute;
	top: 64px;
	right: 0;
	left: 0;
	padding: var(--s-8) var(--gutter) var(--s-16);
	background: var(--c-white);
	border-bottom: 1px solid var(--c-grey-200);
	box-shadow: var(--shadow-card);
}

.site-nav__list a {
	display: flex;
	align-items: center;
	min-height: 48px;
	font-size: 17px;
	font-weight: 700;
	color: var(--c-navy);
	text-decoration: none;
	border-bottom: 1px solid var(--c-grey-200);
}

@media (min-width: 900px) {
	.site-header__inner {
		height: 84px;
	}

	.site-header__logo img {
		width: 160px;
	}

	.site-header__actions {
		gap: 20px;
	}

	.site-header__call {
		width: auto;
		min-height: 52px;
		border-radius: var(--r-pill);
		padding: var(--s-12) 22px;
		box-shadow: var(--shadow-call);
	}

	.site-header__call {
		gap: var(--s-12);
	}

	.site-header__call .btn-call__text {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.site-header__call .btn-call__label {
		font-size: 18px;
		line-height: 1.2;
	}

	.site-header__call .btn-call__sub {
		display: block;
		font-size: 13px;
		line-height: 1.3;
		white-space: nowrap;
	}

	.site-nav {
		display: none;
	}

	.site-nav-desktop {
		display: block;
		margin-left: auto;
	}

	.site-nav-desktop .site-nav__list {
		display: flex;
		gap: var(--s-32);
	}

	.site-nav-desktop .site-nav__list a {
		min-height: 0;
		font-size: 15px;
		line-height: 1.3;
		border: 0;
	}

	.site-nav-desktop .site-nav__list a:hover {
		color: var(--c-blue-dark);
	}

	.site-header__inner {
		gap: var(--s-16);
	}
}

/* Hero: head (kicker + H1), media (one photo), body (offer + Call + key facts).
   Mobile: stacked in that order. Desktop: text left, photo right. */
.hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--s-24);
	background: var(--c-blue-50);
}

.hero__decor {
	position: absolute;
	top: -20px;
	right: -330px; /* Figma: left 200 on a 390 frame; anchored right so the 24/7 badge stays off screen */
	width: 520px;
	height: auto;
	max-width: none !important;
	opacity: 0.06;
	pointer-events: none;
}

.hero__grid {
	position: relative;
	display: grid;
	grid-template-areas: "head" "media" "body";
	row-gap: var(--s-16);
}

.hero__head {
	grid-area: head;
	display: flex;
	flex-direction: column;
	gap: var(--s-16);
}

.hero__media {
	grid-area: media;
}

.hero__body {
	grid-area: body;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.hero__kicker {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-blue-dark);
}

.hero__offer {
	font-size: var(--t-offer);
	font-weight: 700;
	line-height: 1.35;
}

.hero__photo {
	width: 100%;
	height: 160px;
	object-fit: cover;
	object-position: var(--photo-pos, 50% 15%);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-card);
}

.hero__action {
	display: flex;
	flex-direction: column;
	gap: var(--s-24);
}

@media (min-width: 900px) {
	.hero {
		padding-block: var(--s-48);
	}

	.hero__decor {
		display: none;
	}

	.hero__grid {
		grid-template-areas: "head media" "body media";
		grid-template-columns: minmax(0, 1fr) 520px;
		align-content: center;
		column-gap: var(--s-64);
		row-gap: 20px;
	}

	.hero__grid--no-photo {
		grid-template-areas: "head" "body";
		grid-template-columns: minmax(0, 760px);
	}

	.hero__head {
		gap: 20px;
		align-self: end;
		padding-top: var(--s-24);
	}

	.hero__body {
		gap: 40px;
		align-self: start;
		padding-bottom: var(--s-24);
	}

	.hero__offer {
		line-height: 1.3;
	}

	.hero__media {
		align-self: center;
	}

	.hero__photo {
		height: 480px;
		border-radius: var(--r-photo);
	}

	.hero__action {
		gap: 28px;
	}
}

/* Key facts (hero): 2x2 cards */
.key-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.key-fact {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: var(--s-12);
	background: var(--c-white);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-card);
}

.key-fact__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--c-blue-50);
}

.key-fact__icon .icon {
	width: 20px;
	height: 20px;
}

.key-fact__value {
	display: block;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.2;
}

.key-fact__caption {
	display: block;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--c-grey-600);
}

@media (min-width: 900px) {
	.key-fact {
		gap: var(--s-12);
		padding: 14px var(--s-16);
	}

	.key-fact__icon {
		width: 40px;
		height: 40px;
	}

	.key-fact__icon .icon {
		width: 22px;
		height: 22px;
	}

	.key-fact__value {
		font-size: 19px;
	}
}

/* Lead paragraph under the hero (town local line) */
.lead {
	max-width: 860px;
	font-size: var(--t-lead);
	line-height: 1.55;
}

/* Reviews */
.reviews {
	display: flex;
	gap: var(--s-12);
	margin: 0 calc(-1 * var(--gutter));
	padding: var(--s-8) var(--gutter) var(--s-32);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--gutter);
	scrollbar-width: none;
	list-style: none;
	/* Cards don't stretch to the tallest one: an opened review grows alone (site.js gives the closed cards one min-height). */
	align-items: flex-start;
}

.reviews::-webkit-scrollbar {
	display: none;
}

.review {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--s-16);
	flex: 0 0 300px;
	margin: 0;
	padding: var(--s-24);
	background: var(--c-white);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-card);
	scroll-snap-align: start;
}

.review::before {
	content: "\201C";
	display: block;
	height: 36px;
	font-size: 56px;
	font-weight: 800;
	line-height: 1;
	color: var(--c-blue-light);
}

.review__text {
	font-size: 18px;
	line-height: 1.55;
}

.review__text p + p {
	margin-top: var(--s-8);
}

/* Long reviews: 6 lines + "Read more" (site.js adds .is-clamped only when at least 2 more lines are hidden). */
.review__text.is-clamped,
.review__text.is-open {
	overflow: hidden;
	transition: max-height 0.4s ease;
}

.review__text.is-clamped {
	max-height: calc(1.55em * 6);
	-webkit-mask-image: linear-gradient(#000 60%, transparent);
	mask-image: linear-gradient(#000 60%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.review__text.is-clamped,
	.review__text.is-open {
		transition: none;
	}
}

.review__more {
	align-self: flex-start;
	margin-top: calc(-1 * var(--s-8));
	padding: 0;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	color: var(--c-blue-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
	background: none;
	border: 0;
	cursor: pointer;
}

.review__author {
	margin-top: auto;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

/* One row on every screen: swipe on mobile, arrows + scroll on desktop (site.js shows the arrows when the row overflows). */
.reviews__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--s-16);
}

.reviews__nav {
	display: none;
	flex: none;
	gap: var(--s-8);
}

.reviews__btn {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	color: var(--c-blue-dark);
	background: var(--c-white);
	border: 0;
	border-radius: 50%;
	box-shadow: var(--shadow-card);
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.reviews__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.reviews__btn .icon {
	width: 22px;
	height: 22px;
}

.reviews__prev {
	transform: scaleX(-1);
}

@media (min-width: 900px) {
	.reviews__nav:not([hidden]) {
		display: flex;
	}

	/* Side padding = gap: the 4th card starts exactly at the row's edge, so no cut card peeks in, and the shadows still fit. */
	.reviews {
		gap: var(--s-24);
		margin-inline: calc(-1 * var(--s-24));
		padding-inline: var(--s-24);
		scroll-padding-inline: var(--s-24);
		scroll-behavior: smooth;
		/* Soft side edges instead of a hard line where the next card's shadow is clipped. */
		-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--s-24), #000 calc(100% - var(--s-24)), transparent);
		mask-image: linear-gradient(to right, transparent, #000 var(--s-24), #000 calc(100% - var(--s-24)), transparent);
	}

	.review {
		flex-basis: calc((min(100vw - 2 * var(--gutter), var(--wrap)) - 2 * var(--s-24)) / 3);
	}
}

@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
	.reviews {
		scroll-behavior: auto;
	}
}

/* Check list */
.check-list {
	display: flex;
	flex-direction: column;
	gap: var(--s-16);
	margin: 0;
	padding: 0;
	list-style: none;
}

.check-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	line-height: 1.55;
}

.check-list .icon {
	width: 22px;
	height: 22px;
	margin-top: 2px;
}

@media (min-width: 900px) {
	.check-list li {
		align-items: center;
		gap: var(--s-12);
	}

	.check-list .icon {
		width: 24px;
		height: 24px;
		margin-top: 0;
	}
}

/* Photo with caption */
.photo {
	margin: 0;
}

.photo img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-card);
}

.photo figcaption {
	margin-top: var(--s-12);
	font-size: 15px;
	line-height: 1.45;
	color: var(--c-grey-600);
}

@media (min-width: 900px) {
	.photo img {
		height: 240px;
	}
}

/* Town: services + callback form */
.town-services {
	display: grid;
	grid-template-areas: "list" "form" "photo";
	gap: var(--s-32);
}

.town-services__list {
	grid-area: list;
	display: flex;
	flex-direction: column;
	gap: var(--s-16);
}

.town-services__form {
	grid-area: form;
}

.town-services__photo {
	grid-area: photo;
}

@media (min-width: 900px) {
	.town-services {
		grid-template-areas: "list form" "photo form";
		grid-template-columns: minmax(0, 1fr) 480px;
		grid-template-rows: auto 1fr;
		column-gap: var(--s-64);
		row-gap: var(--s-16);
	}

	.town-services__list .btn-call {
		display: none;
	}
}

/* Callback form card (Fluent Forms markup inside) */
.callback-card {
	display: flex;
	flex-direction: column;
	gap: var(--s-16);
	padding: 20px;
	background: var(--c-white);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-card);
}

@media (min-width: 900px) {
	.callback-card {
		padding: var(--s-32);
	}
}

.callback-card .kfx-callback {
	display: flex;
	flex-direction: column;
	gap: var(--s-16);
}

.callback-card .fluentform fieldset {
	display: flex !important;
	flex-direction: column;
	gap: var(--s-16);
}

.callback-card .ff-el-group {
	margin: 0 !important;
}

.callback-card .ff-el-input--label {
	margin-bottom: 6px;
}

.callback-card .ff-el-input--label label {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-navy);
}

.callback-card .ff-el-form-control {
	display: block;
	width: 100%;
	min-height: 52px;
	padding: 13px 14px;
	border: 1px solid var(--c-grey-600);
	border-radius: var(--r-sm);
	background: var(--c-white);
	color: var(--c-navy);
	font-family: var(--f-body);
	font-size: 17px;
	line-height: 1.5;
	box-shadow: none;
}

.callback-card textarea.ff-el-form-control {
	min-height: 96px;
	resize: vertical;
}

.callback-card .ff-el-form-control::placeholder {
	color: var(--c-grey-600);
	opacity: 1;
}

.callback-card .ff-el-form-control:focus {
	outline: none;
	border: 2px solid var(--c-blue-dark);
	padding: 12px 13px;
}

.callback-card .ff-el-is-error .ff-el-form-control {
	border: 2px solid var(--c-error);
}

.callback-card .error,
.callback-card .text-danger {
	margin-top: 6px;
	font-size: 15px;
	color: var(--c-error);
}

/* The form's own privacy note is replaced by .callback-card__privacy at the bottom (Figma order). */
.callback-card .ff-custom_html {
	display: none;
}

.callback-card .ff-btn-submit {
	width: 100%;
	min-height: 52px;
	padding: 0 var(--s-24);
	border: 0 !important;
	border-radius: var(--r-pill) !important;
	background: var(--c-navy) !important;
	box-shadow: var(--shadow-secondary);
	color: var(--c-white) !important;
	font-family: var(--f-body);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
}

.callback-card__privacy,
.callback-card .kfx-callback__privacy {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--c-grey-600);
}

.callback-card__privacy a,
.callback-card .kfx-callback__privacy a {
	color: inherit;
}

.callback-card .kfx-callback__call {
	font-size: 15px;
	line-height: 1.45;
}

.callback-card .kfx-callback__call a {
	color: var(--c-navy);
	font-weight: 700;
	text-decoration: none;
}

.callback-card .ff-message-success {
	padding: var(--s-16);
	border: 0;
	border-radius: var(--r-md);
	background: var(--c-blue-50);
	box-shadow: none;
	font-size: 17px;
}

/* FAQ */
.faq {
	display: grid;
	gap: var(--s-24);
}

.faq__intro {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.faq__intro > p {
	font-size: var(--t-lead);
	line-height: 1.5;
	color: var(--c-grey-600);
}

.help-card {
	display: none;
	flex-direction: column;
	gap: 14px;
	padding: 28px;
	border-radius: var(--r-xl);
	background: var(--grad-help);
	box-shadow: var(--shadow-card);
	color: var(--c-white);
}

.help-card h3 {
	color: var(--c-white);
}

.help-card p {
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
}

.faq__list {
	border-radius: var(--r-xl);
}

.faq-item {
	border-bottom: 1px solid var(--c-grey-200);
}

.faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-16);
	padding-block: 20px;
	font-family: var(--f-head);
	font-size: var(--t-h3);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.005em;
	cursor: pointer;
	list-style: none;
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

.faq-item summary .icon {
	transition: transform 0.2s ease;
}

.faq-item[open] summary .icon {
	transform: rotate(180deg);
}

.faq-item__answer {
	padding-bottom: 20px;
	margin-top: -8px;
	line-height: 1.55;
	color: var(--c-grey-600);
}

@media (min-width: 900px) {
	.faq {
		grid-template-columns: 380px minmax(0, 1fr);
		align-items: start;
		gap: var(--s-64);
	}

	.help-card {
		display: flex;
	}

	.faq__list {
		padding: var(--s-8) var(--s-32);
		background: var(--c-white);
		box-shadow: var(--shadow-card);
	}

	.faq-item:last-child {
		border-bottom: 0;
	}
}

/* CTA band (light, before the navy footer) */
.cta-band {
	padding-block: 40px;
	background: var(--c-blue-50);
}

.cta-band__inner {
	display: flex;
	flex-direction: column;
	gap: var(--s-24);
}

.cta-band__text {
	display: flex;
	flex-direction: column;
	gap: var(--s-8);
	max-width: 700px;
}

.cta-band__text p {
	font-size: 18px;
	line-height: 1.55;
	opacity: 0.85;
}

.cta-band .btn-call {
	width: 100%;
}

@media (min-width: 900px) {
	.cta-band {
		padding-block: 56px;
	}

	.cta-band__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.cta-band .btn-call {
		width: auto;
	}
}

/* Footer */
.site-footer {
	padding: 40px 0 112px;
	background: var(--c-navy);
	color: var(--c-white);
}

.site-footer a {
	color: var(--c-white);
	text-decoration: none;
}

.site-footer__top {
	display: flex;
	flex-direction: column;
	gap: var(--s-24);
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--s-16);
}

.site-footer__logo img {
	width: 160px;
	height: auto;
}

.site-footer__phone {
	font-family: var(--f-head);
	font-size: var(--t-h3);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.005em;
}

.site-footer__hours {
	font-size: 15px;
	line-height: 1.45;
}

.site-footer .link-whatsapp {
	color: var(--c-white);
}

.site-footer__heading {
	font-family: var(--f-body);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.06em;
	color: var(--c-white);
}

.site-footer__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Areas: 15 hubs in two columns, filled top to bottom. */
.site-footer__col--split ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(8, auto);
	grid-auto-flow: column;
	column-gap: var(--s-24);
}

.site-footer__col a {
	display: flex;
	align-items: center;
	min-height: 48px;
	font-size: 17px;
	line-height: 1.55;
	border-bottom: 1px solid var(--c-blue-dark);
}

.site-footer__legal {
	display: flex;
	flex-direction: column;
	gap: var(--s-12);
	margin-top: var(--s-24);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--c-grey-200);
}

.site-footer__legal a,
.site-footer__cookie-settings {
	color: var(--c-grey-200);
	text-decoration: underline;
}

.site-footer__cookie-settings {
	padding: 0;
	font: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

@media (min-width: 900px) {
	.site-footer {
		padding: var(--s-64) 0 var(--s-32);
	}

	.site-footer__top {
		flex-direction: row;
		justify-content: space-between;
		gap: 40px;
	}

	.site-footer__logo img {
		width: 180px;
	}

	.site-footer__phone {
		font-size: 22px;
	}

	.site-footer__heading {
		margin-bottom: 10px !important;
	}

	.site-footer__col li + li {
		margin-top: 10px;
	}

	.site-footer__col--split ul {
		row-gap: 10px;
		column-gap: 40px;
	}

	.site-footer__col--split li + li {
		margin-top: 0;
	}

	.site-footer__col a {
		display: inline;
		min-height: 0;
		font-size: 15px;
		line-height: 1.45;
		border: 0;
	}

	.site-footer__col a:hover {
		text-decoration: underline;
	}

	.site-footer__legal {
		flex-direction: row;
		justify-content: space-between;
		margin-top: 40px;
		padding-top: var(--s-24);
		border-top: 1px solid var(--c-blue-light);
	}
}

/* Sticky call bar (mobile only): shown after the hero Call button leaves the screen. */
.sticky-call {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 60;
	padding: var(--s-12) var(--gutter) calc(var(--s-12) + env(safe-area-inset-bottom));
	background: var(--c-white);
	box-shadow: var(--shadow-sticky);
	transform: translateY(110%);
	transition: transform 0.2s ease;
}

.sticky-call.is-visible {
	transform: none;
}

.sticky-call .btn-call {
	width: 100%;
}

@media (min-width: 900px) {
	.sticky-call {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sticky-call,
	.faq-item summary .icon,
	.btn-call {
		transition: none;
	}
}

/* Breadcrumbs (service and hub pages) */
.kfx-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-8);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--c-grey-600);
}

.kfx-breadcrumbs li + li::before {
	content: "\203A";
	margin-right: var(--s-8);
}

.kfx-breadcrumbs a {
	color: var(--c-grey-600);
	text-decoration: none;
}

/* Generic H2 content sections from the "sections" repeater */
.content-section + .content-section {
	margin-top: var(--s-48);
}

.content-section h2 {
	margin-bottom: var(--s-16);
}

.content-section p,
.content-section ul,
.content-section ol {
	max-width: 760px;
	margin: 0 0 var(--s-16);
}

/* Section spacing helpers */
.stack-24 > * + * {
	margin-top: var(--s-24);
}

.section--tight-bottom {
	padding-bottom: var(--s-8);
}

/* No reviews after the local line: keep normal spacing before the next section. */
.section--tight-bottom:has(+ .section--grey) {
	padding-bottom: var(--section-y);
}

.section--tight-top {
	padding-top: var(--s-24);
}

@media (min-width: 900px) {
	.section--tight-bottom {
		padding-bottom: 0;
	}

	.section--tight-top {
		padding-top: var(--s-24);
	}
}

/* Link cards (services / areas lists) */
.link-cards {
	display: grid;
	gap: var(--s-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.link-cards a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-12);
	min-height: 56px;
	padding: var(--s-12) var(--s-16);
	background: var(--c-white);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-card);
	font-weight: 700;
	color: var(--c-navy);
	text-decoration: none;
}

@media (min-width: 900px) {
	.link-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--s-16);
	}
}

/* ===== Service / hub components ===== */

/* Hero: lead line + situation chips (service, hub) */
.hero__intro {
	display: flex;
	flex-direction: column;
	gap: var(--s-16);
}

.hero__lead {
	font-size: var(--t-lead);
	line-height: 1.5;
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.chip {
	display: inline-flex;
	align-items: center;
	padding: 6px var(--s-12);
	border-radius: var(--r-pill);
	background: var(--c-blue-100);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-navy);
}

.chips--links {
	gap: 10px;
}

.chip--link {
	min-height: 48px;
	padding: 0 18px;
	background: var(--c-white);
	box-shadow: var(--shadow-card);
	text-decoration: none;
}

.chip--link:hover {
	color: var(--c-blue-dark);
}

/* Long button labels wrap on small screens; the number itself never breaks. */
.js-phone {
	white-space: nowrap;
}

/* Rich text from wysiwyg fields */
.prose {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.prose p,
.prose ul,
.prose ol {
	margin: 0;
	line-height: 1.55;
}

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

.prose li + li {
	margin-top: var(--s-8);
}

.prose h2 + * {
	margin-top: 2px;
}

/* Sub-headings inside long text (legal pages) */
.prose * + h2 {
	margin-top: var(--s-24);
	font-size: 24px;
}

/* Inline links in body text: underline thickens and colour lightens on hover. */
:is(.prose, .faq-item__answer, .block__note, .callback-card__privacy, .kfx-callback__privacy) a:not([class]) {
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
}

:is(.prose, .faq-item__answer, .block__note, .callback-card__privacy, .kfx-callback__privacy) a:not([class]):hover {
	color: var(--c-call-start);
	text-decoration-thickness: 2px;
}

@media (prefers-reduced-motion: reduce) {
	:is(.prose, .faq-item__answer, .block__note, .callback-card__privacy, .kfx-callback__privacy) a:not([class]) {
		transition: none;
	}
}

.block__call {
	align-self: flex-start;
	margin-top: var(--s-24);
}

.prose .block__call {
	margin-top: var(--s-8);
}

.block__note {
	margin-top: var(--s-24);
	line-height: 1.55;
}

.link-more {
	font-size: 15px;
	font-weight: 700;
	color: var(--c-blue-dark);
}

/* Text (+ photo) */
.block-text {
	display: grid;
	gap: var(--s-24);
}

.block-text__photo {
	margin: 0;
}

.block-text__photo img {
	width: 100%;
	height: 320px;
	object-fit: cover;
	border-radius: var(--r-md);
}

.block-text__photo figcaption {
	margin-top: var(--s-8);
	font-size: 13px;
	font-weight: 600;
	color: var(--c-grey-600);
}

@media (min-width: 900px) {
	.block-text--photo {
		grid-template-columns: minmax(0, 1fr) 420px;
		gap: var(--s-64);
		align-items: start;
	}

	.block-text__photo img {
		height: 300px;
	}

	.block-text--tall .block-text__photo img {
		height: 520px;
	}

	.block-text--photo:not(.block-text--tall) {
		align-items: center;
	}

	.block-text--plain .block-text__body {
		max-width: 860px;
	}

	.block-text--aside {
		grid-template-columns: minmax(0, 1fr) 380px;
		gap: var(--s-64);
		align-items: center;
	}
}

/* Call card (.help-card, as next to FAQ) beside a text block without a photo; desktop only, on mobile the sticky call bar does this job. */
.help-card--text .check-list li {
	color: var(--c-white);
}

.help-card--text .check-list .icon {
	color: var(--c-white);
}

.help-card--text .btn-call {
	margin-top: var(--s-8);
}

/* Problem / cause / fix table */
.block-table__intro {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 1000px;
	margin-bottom: var(--s-24);
}

.block-table__intro p {
	line-height: 1.55;
}

.fix-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	counter-reset: fix;
}

.fix-table thead {
	display: none;
}

.fix-table tbody,
.fix-table tr,
.fix-table th,
.fix-table td {
	display: block;
}

.fix-table tbody tr {
	position: relative;
	counter-increment: fix;
	margin-bottom: var(--s-16);
	padding: 20px;
	background: var(--c-white);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-card);
}

.fix-table tbody th {
	display: flex;
	align-items: center;
	gap: var(--s-12);
	margin-bottom: var(--s-12);
	font-family: var(--f-head);
	font-size: var(--t-h3);
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
}

.fix-table tbody th::before {
	content: counter(fix);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--grad-call);
	color: var(--c-white);
	font-size: 15px;
	font-weight: 800;
}

.fix-table td {
	font-size: 15px;
	line-height: 1.45;
}

.fix-table td::before {
	content: attr(data-label);
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--c-grey-600);
}

.fix-table .fix-table__fix {
	display: grid;
	grid-template-columns: 20px 1fr;
	column-gap: 10px;
	margin-top: var(--s-12);
	padding: 14px;
	border-radius: var(--r-md);
	background: var(--c-blue-50);
	font-weight: 700;
}

.fix-table .fix-table__fix::before {
	grid-column: 2;
	color: var(--c-blue-dark);
}

.fix-table .fix-table__fix .icon {
	grid-row: 1 / span 2;
	width: 20px;
	height: 20px;
	color: var(--c-blue-light);
}

@media (min-width: 900px) {
	.fix-table {
		display: table;
		padding: var(--s-8);
		background: var(--c-white);
		border-radius: var(--r-xl);
		box-shadow: var(--shadow-card);
	}

	.fix-table thead {
		display: table-header-group;
	}

	.fix-table tbody {
		display: table-row-group;
	}

	.fix-table tr {
		display: table-row;
	}

	.fix-table th,
	.fix-table td {
		display: table-cell;
		width: 33.33%;
		padding: var(--s-16) var(--s-24);
		vertical-align: top;
		border-bottom: 1px solid var(--c-grey-200);
		font-size: 17px;
		line-height: 1.55;
	}

	.fix-table tbody tr {
		margin: 0;
		padding: 0;
		background: none;
		box-shadow: none;
	}

	.fix-table tbody tr:last-child > * {
		border-bottom: 0;
	}

	.fix-table thead th {
		padding-block: 10px;
		font-size: 13px;
		font-weight: 600;
		line-height: 1.4;
		text-align: left;
		color: var(--c-grey-600);
	}

	.fix-table tbody th {
		display: table-cell;
		margin: 0;
		font-family: var(--f-body);
		font-size: 17px;
		font-weight: 700;
		line-height: 1.55;
	}

	.fix-table tbody th::before,
	.fix-table td::before {
		display: none;
	}

	.fix-table td {
		color: var(--c-grey-600);
	}

	.fix-table .fix-table__fix {
		display: table-cell;
		margin: 0;
		padding: var(--s-16) var(--s-24);
		border-radius: 0;
		background: none;
		font-weight: 400;
		color: var(--c-navy);
	}

	.fix-table .fix-table__fix .icon {
		float: left;
		margin: 3px var(--s-8) 0 0;
		color: var(--c-blue-dark);
	}

	.fix-table .fix-table__fix span {
		display: block;
		overflow: hidden;
	}
}

/* Text + checklist card */
.block-check {
	display: grid;
	gap: var(--s-24);
}

.check-card {
	display: flex;
	flex-direction: column;
	gap: var(--s-12);
	padding: var(--s-24);
	border-radius: var(--r-md);
	background: var(--c-blue-50);
}

.check-list--tight {
	gap: var(--s-12);
}

.check-card .check-list {
	gap: var(--s-12);
}

.check-card .check-list li,
.check-list--tight li {
	align-items: flex-start;
	gap: 10px;
}

.check-card .check-list .icon,
.check-list--tight .icon {
	width: 22px;
	height: 22px;
	margin-top: 3px;
}

@media (min-width: 900px) {
	.block-check {
		grid-template-columns: minmax(0, 1fr) 480px;
		gap: var(--s-64);
		align-items: start;
	}

	.check-card {
		padding: 28px;
	}
}

/* Steps on navy */
.section--navy {
	background:
		radial-gradient(ellipse 80% 40% at 0% 57%, rgba(42, 122, 179, 0.35), rgba(42, 122, 179, 0)),
		var(--c-navy);
	color: var(--c-white);
}

.section--navy h2,
.section--navy h3 {
	color: var(--c-white);
}

.block-steps {
	display: grid;
	gap: var(--s-32);
}

.block-steps__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.block-steps__lead {
	font-size: var(--t-lead);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.78);
}

.block-steps__photo {
	width: 100%;
	height: 220px;
	object-fit: cover;
	border-radius: var(--r-lg);
}

.block-steps__note {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.steps {
	display: flex;
	flex-direction: column;
	gap: var(--s-12);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.step {
	counter-increment: step;
	display: flex;
	flex-direction: column;
	gap: var(--s-12);
	padding: 18px var(--s-24);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.06);
}

.step::before {
	content: counter(step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--c-blue-dark);
	font-family: var(--f-head);
	font-size: 26px;
	font-weight: 800;
	line-height: 1;
}

.step p {
	font-size: 15px;
	line-height: 1.45;
	opacity: 0.8;
}

@media (min-width: 900px) {
	.block-steps {
		grid-template-columns: 440px minmax(0, 1fr);
		align-items: center;
		gap: var(--s-64);
	}

	.block-steps__photo {
		height: 260px;
	}
}

/* Two columns + gallery */
.block-columns {
	display: grid;
	gap: var(--s-32);
}

.block-columns__head {
	margin-bottom: var(--s-12);
}

.gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-12);
	margin: var(--s-24) 0 0;
	padding: 0;
	list-style: none;
}

.gallery figure {
	margin: 0;
}

.gallery img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--r-md);
}

.gallery figcaption {
	margin-top: var(--s-8);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--c-grey-600);
}

@media (min-width: 900px) {
	.block-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s-64);
	}

	.gallery {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--s-24);
	}

	.gallery img {
		aspect-ratio: auto;
		height: 282px;
	}
}

/* Icon cards */
.icon-cards {
	display: grid;
	gap: var(--s-16);
	margin: 0;
	padding: 0;
	list-style: none;
}

.icon-card {
	display: flex;
	flex-direction: column;
	gap: var(--s-8);
	padding: var(--s-24);
	background: var(--c-white);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-card);
}

.icon-card .icon {
	width: 28px;
	height: 28px;
}

.icon-card p {
	font-size: 15px;
	line-height: 1.45;
	color: var(--c-grey-600);
}

@media (min-width: 600px) {
	.icon-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.icon-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--s-24);
	}
}

/* Dark CTA band (middle of the page) */
.cta-band--dark {
	background: linear-gradient(171deg, var(--c-navy) 14%, var(--c-blue-dark) 86%);
	color: var(--c-white);
}

.cta-band--dark h2 {
	color: var(--c-white);
}

.btn-call--outline {
	border: 2px solid var(--c-white);
}

/* Price text + form panel */
.section--panel {
	padding-block: var(--s-24);
}

.panel {
	position: relative;
	overflow: hidden;
	display: grid;
	gap: var(--s-32);
	padding: var(--s-24) var(--s-16);
	border-radius: var(--r-xl);
	background: linear-gradient(138deg, var(--c-blue-100) 14%, #f4f9fc 86%);
}

.panel__decor {
	position: absolute;
	top: -63px;
	right: -220px;
	width: 520px;
	max-width: none !important;
	opacity: 0.06;
	pointer-events: none;
}

.panel__text,
.panel .callback-card {
	position: relative;
}

.panel:not(.panel--feature) .panel__text > p:first-of-type {
	font-size: var(--t-lead);
	line-height: 1.5;
}

.panel:not(.panel--feature) .panel__text > p:nth-of-type(2) {
	color: var(--c-grey-600);
}

@media (min-width: 900px) {
	.section--panel {
		padding-block: var(--s-48);
	}

	.panel {
		grid-template-columns: minmax(0, 1fr) 480px;
		align-items: center;
		gap: var(--s-64);
		padding: 56px var(--s-64);
		border-radius: 32px;
	}
}

/* Areas chips */
.block-areas h2 {
	margin-bottom: 18px;
}

.block-areas__text {
	margin-bottom: 18px;
	line-height: 1.55;
}

.section.block-areas {
	padding-bottom: var(--s-24);
}

@media (min-width: 900px) {
	.section.block-areas {
		padding-bottom: var(--s-48);
	}
}

/* ===== Hub components ===== */

.section__lead {
	font-size: var(--t-lead);
	line-height: 1.5;
}

.section__head .section__lead {
	margin-top: var(--s-16);
	color: var(--c-navy);
}

/* White checklist card (emergency facts, towns) */
.check-card--white {
	background: var(--c-white);
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-card);
}

.check-card--white .check-list li span {
	font-weight: 700;
}

.check-card__label {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.check-list--bold li span {
	font-weight: 700;
}

@media (min-width: 900px) {
	.check-card--white {
		padding: 28px;
	}

	.block-check:has(.check-card--white) {
		grid-template-columns: minmax(0, 1fr) 440px;
		align-items: center;
	}
}

/* Areas & postcodes */
.area-list {
	display: grid;
	gap: var(--s-16);
}

.area-list__card {
	margin: 0;
	padding: var(--s-8) var(--s-16);
	list-style: none;
	background: var(--c-white);
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-card);
}

.area-row {
	display: flex;
	align-items: center;
	gap: var(--s-12);
	padding: var(--s-12) var(--s-4);
	border-bottom: 1px solid var(--c-grey-200);
}

.area-row:last-child {
	border-bottom: 0;
}

.area-row__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: var(--c-blue-50);
}

.area-row__icon .icon {
	width: 18px;
	height: 18px;
}

.area-row__name {
	flex: 1;
	font-size: 17px;
	line-height: 1.55;
}

.area-row__name small {
	display: block;
	font-size: 13px;
	color: var(--c-grey-600);
}

.area-row__codes {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
	max-width: 200px;
}

.pill {
	padding: var(--s-4) 10px;
	border-radius: var(--r-pill);
	background: var(--c-blue-100);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-blue-dark);
	white-space: nowrap;
}

@media (min-width: 900px) {
	.area-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s-24);
	}

	.area-list__card {
		padding-inline: var(--s-24);
	}
}

/* Area cards with tags */
.area-cards {
	display: grid;
	gap: var(--s-16);
	margin: 0;
	padding: 0;
	list-style: none;
}

.area-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: var(--s-24);
	background: var(--c-white);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-card);
}

.area-card__head {
	display: flex;
	align-items: center;
	gap: 14px;
}

.area-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: var(--c-blue-50);
}

.area-card__icon .icon {
	width: 26px;
	height: 26px;
}

.area-card p {
	line-height: 1.55;
	color: var(--c-grey-600);
}

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tags li {
	padding: 6px var(--s-12);
	border-radius: var(--r-pill);
	background: var(--c-blue-50);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--c-blue-dark);
}

@media (min-width: 900px) {
	.area-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s-24);
	}

	.area-card {
		padding: 28px;
	}
}

/* Highlighted panel */
.panel--feature {
	display: block;
}

.panel--feature .panel__text {
	max-width: 860px;
}

.panel__note {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-blue-dark);
}

/* Service links */
.service-links {
	display: grid;
	gap: var(--s-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.service-links a {
	display: flex;
	align-items: center;
	gap: var(--s-12);
	min-height: 58px;
	padding: 10px 18px 10px 10px;
	border-radius: var(--r-pill);
	background: var(--c-white);
	box-shadow: var(--shadow-card);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-navy);
	text-decoration: none;
}

.service-links a:hover {
	color: var(--c-blue-dark);
}

.service-links__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--c-blue-50);
}

.service-links__icon .icon {
	width: 20px;
	height: 20px;
}

.service-links__name {
	flex: 1;
}

.service-links .service-links__arrow {
	width: 18px;
	height: 18px;
}

@media (min-width: 600px) {
	.service-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.service-links {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Compact icon cards (icon + bold text) */
.icon-card--compact {
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	padding: 20px var(--s-24);
}

.icon-card--compact .icon {
	width: 20px;
	height: 20px;
	margin-top: 2px;
}

.icon-card--compact p {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.55;
	color: var(--c-navy);
}

/* "Prefer us to call you?" */
.callback-section {
	display: grid;
	gap: var(--s-32);
}

.callback-section__text {
	display: flex;
	flex-direction: column;
	gap: var(--s-16);
}

.callback-section__text .section__lead {
	color: var(--c-grey-600);
	font-size: 18px;
	line-height: 1.55;
}

.callback-section__photo {
	width: 100%;
	height: 220px;
	margin-top: var(--s-8);
	object-fit: cover;
	border-radius: var(--r-lg);
}

@media (min-width: 900px) {
	.callback-section {
		grid-template-columns: minmax(0, 1fr) 480px;
		align-items: center;
		gap: var(--s-64);
	}

	.callback-section__photo {
		height: 260px;
	}
}

/* Areas table right after a text block: tight top, as in Figma */
.block + .block-areas-table {
	padding-top: var(--s-32);
}

/* ===== Homepage and trust pages ===== */

/* Hero variants without a photo: watermark on the right, Call with arrival line */
.hero--plain .hero__grid,
.hero--contact .hero__grid,
.hero--thanks .hero__grid {
	grid-template-areas: "head" "body";
}

@media (min-width: 900px) {
	.hero--plain,
	.hero--contact,
	.hero--thanks {
		padding-block: var(--s-48) 72px;
	}

	.hero--plain .hero__grid,
	.hero--contact .hero__grid,
	.hero--thanks .hero__grid {
		grid-template-columns: minmax(0, 760px);
	}

	.hero--plain .hero__decor,
	.hero--contact .hero__decor,
	.hero--thanks .hero__decor {
		display: block;
		top: 10px;
		right: 40px;
		left: auto;
		width: 460px;
	}

	.hero--plain .hero__body,
	.hero--contact .hero__body,
	.hero--thanks .hero__body {
		gap: 28px;
	}

	.hero--plain .btn-call--lg,
	.hero--contact .btn-call--lg,
	.hero--thanks .btn-call--lg {
		width: 400px;
	}
}

.hero__number {
	display: block;
	font-family: var(--f-head);
	font-size: clamp(40px, 6vw, 52px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--c-blue-dark) !important;
	text-decoration: none;
}

.hero__note {
	font-size: 15px;
	line-height: 1.45;
	color: var(--c-grey-600);
}

.hero__tick .icon {
	width: 48px;
	height: 48px;
}

/* Steps: badges (dark) and light row variant */
.step {
	position: relative;
}

.step__badge {
	position: absolute;
	top: 18px;
	right: var(--s-24);
	padding: 4px 10px;
	border-radius: var(--r-pill);
	background: rgba(59, 147, 193, 0.18);
	font-size: 13px;
	font-weight: 600;
	color: #cfe6f3;
}

.steps--light {
	display: grid;
	gap: var(--s-16);
}

.steps--light .step {
	padding: var(--s-24);
	border: 0;
	background: var(--c-white);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-card);
	color: var(--c-navy);
}

.steps--light .step::before {
	width: 32px;
	height: 32px;
	background: var(--c-blue-dark);
	color: var(--c-white);
	font-size: 15px;
}

.steps--light .step p {
	color: var(--c-grey-600);
	opacity: 1;
}

.block__note--strong {
	font-size: 15px;
	font-weight: 700;
	color: var(--c-blue-dark);
}

@media (min-width: 900px) {
	.steps--light {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--s-24);
	}
}

/* Bento: feature tile + link cards */
.bento {
	display: grid;
	gap: var(--s-16);
}

.feature-tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 360px;
	overflow: hidden;
	border-radius: var(--r-xl);
	color: var(--c-white) !important;
	text-decoration: none;
}

.feature-tile__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

.feature-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(22, 39, 56, 0) 35%, rgba(22, 39, 56, 0.92));
}

.feature-tile__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--s-12);
	padding: var(--s-24);
}

.feature-tile__label {
	font-size: 15px;
	font-weight: 700;
	color: #9ccbe6;
}

.feature-tile__title {
	font-family: var(--f-head);
	font-size: var(--t-h2);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -0.015em;
}

.feature-tile__text {
	font-size: 18px;
	line-height: 1.55;
}

.feature-tile__more {
	font-size: 15px;
	font-weight: 700;
}

.link-cards-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.link-card {
	display: flex;
	flex-direction: column;
	gap: var(--s-12);
	height: 100%;
	padding: var(--s-16);
	background: var(--c-white);
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-card);
	color: var(--c-navy) !important;
	text-decoration: none;
	transition: transform 0.15s ease;
}

.link-card:hover {
	transform: translateY(-2px);
}

.link-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--c-blue-50) 14%, var(--c-blue-100) 86%);
}

.link-card__icon .icon {
	width: 26px;
	height: 26px;
}

.link-card__title {
	font-family: var(--f-head);
	font-size: var(--t-h3);
	font-weight: 700;
	line-height: 1.3;
}

.link-card__text {
	font-size: 15px;
	line-height: 1.45;
	color: var(--c-grey-600);
}

.link-card__more {
	margin-top: auto;
	font-size: 15px;
	font-weight: 700;
	color: var(--c-blue-dark);
}

@media (min-width: 900px) {
	.bento {
		grid-template-columns: 588px minmax(0, 1fr);
		gap: var(--s-24);
	}

	.feature-tile {
		min-height: 0;
	}

	.feature-tile__body {
		padding: var(--s-32);
	}

	.link-cards-grid {
		gap: var(--s-24);
	}

	.link-card {
		padding: var(--s-24);
	}

	.bento--hubs {
		grid-template-columns: 384px minmax(0, 1fr);
	}

	.link-cards-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.link-cards-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Price table + side card */
.block-prices__grid {
	display: grid;
	gap: var(--s-24);
	align-items: start;
}

.price-table {
	padding: var(--s-8);
	background: var(--c-white);
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-card);
}

.price-table table {
	width: 100%;
	border-collapse: collapse;
}

.price-table thead th {
	padding: 10px var(--s-12);
	font-size: 13px;
	font-weight: 600;
	color: var(--c-grey-600);
	text-align: left;
}

.price-table thead th:last-child,
.price-table td {
	text-align: right;
}

.price-table tbody th,
.price-table td {
	padding: 14px var(--s-12);
	border-top: 1px solid var(--c-grey-200);
	font-size: 15px;
	font-weight: 400;
	text-align: left;
	vertical-align: middle;
}

.price-table td {
	text-align: right;
	white-space: nowrap;
}

.price-table tbody th a {
	color: var(--c-navy);
	text-decoration: none;
}

.price-table tr.is-lowest th,
.price-table tr.is-lowest td {
	border-top: 0;
	background: var(--c-blue-50);
	font-weight: 700;
}

.price-table tr.is-lowest th {
	border-radius: 14px 0 0 14px;
}

.price-table tr.is-lowest td {
	border-radius: 0 14px 14px 0;
}

.price-table__flag {
	margin-right: var(--s-8);
	font-size: 13px;
	font-weight: 600;
	color: var(--c-blue-dark);
}

.price-pill {
	display: inline-block;
	padding: 4px 10px;
	border-radius: var(--r-pill);
	background: var(--c-blue-100);
	font-size: 15px;
	font-weight: 700;
	color: var(--c-blue-dark);
}

.is-lowest .price-pill {
	background: var(--c-blue-dark);
	color: var(--c-white);
}

.price-table__note {
	margin-top: var(--s-8);
	padding: var(--s-16);
	border-radius: var(--r-md);
	background: var(--c-blue-50);
	font-size: 15px;
	line-height: 1.45;
}

.price-table__note p + p {
	margin-top: var(--s-4);
	color: var(--c-grey-600);
}

.price-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px;
	border-radius: var(--r-xl);
	background: var(--grad-help);
	box-shadow: var(--shadow-card);
	color: var(--c-white);
}

.price-card h3 {
	color: var(--c-white) !important;
}

.price-card p {
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
}

.price-card .check-list .icon {
	color: #cfe6f3;
}

.price-card__label {
	font-size: 15px;
	font-weight: 700;
}

.price-card__big {
	font-family: var(--f-head);
	font-size: 64px;
	font-weight: 800;
	line-height: 1;
	color: var(--c-white) !important;
}

@media (max-width: 599px) {
	.price-table__flag {
		display: none;
	}

	.price-table tbody th,
	.price-table td {
		padding-inline: var(--s-8);
	}
}

@media (min-width: 900px) {
	.block-prices__grid {
		grid-template-columns: minmax(0, 1fr) 380px;
		gap: var(--s-32);
	}

	.price-table tbody th,
	.price-table td {
		padding: 14px var(--s-16);
	}
}

/* Intro + list cards */
.block-listcards {
	display: grid;
	gap: var(--s-24);
}

.block-listcards__intro {
	display: flex;
	flex-direction: column;
	gap: var(--s-16);
}

.block-listcards__intro p {
	font-size: var(--t-lead);
	line-height: 1.5;
	color: var(--c-grey-600);
}

.list-cards {
	display: flex;
	flex-direction: column;
	gap: var(--s-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.list-cards li {
	display: flex;
	align-items: flex-start;
	gap: var(--s-12);
	padding: var(--s-16) 20px;
	background: var(--c-white);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-card);
	font-weight: 600;
	line-height: 1.5;
}

.list-cards .icon {
	width: 22px;
	height: 22px;
	margin-top: 2px;
	color: var(--c-blue-light);
}

@media (min-width: 900px) {
	.block-listcards {
		grid-template-columns: 380px minmax(0, 1fr);
		gap: var(--s-64);
		align-items: start;
	}
}

/* FAQ groups */
.faq-group__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--grad-help);
}

.faq-group__icon .icon {
	color: var(--c-white);
}

.faq-group__count {
	font-size: 13px !important;
	font-weight: 700;
	color: var(--c-blue-dark) !important;
}

.faq-group .faq__intro > p:not(.faq-group__count) {
	font-size: 15px;
}

/* Jump links, then one gap before the first group (the group keeps its own top padding). */
.faq-jump {
	padding-bottom: 0;
}

main > .faq-jump + .section:not(.section--grey) {
	padding-top: 40px;
}

.chip--small {
	min-height: 40px;
	padding: 0 14px;
	font-size: 13px;
}

@media (min-width: 900px) {
	.faq-group .faq {
		grid-template-columns: 300px minmax(0, 1fr);
	}

	.faq-group .faq__list {
		padding-block: var(--s-8);
	}
}

/* About: photo + badge + mini cards */
.about-intro {
	display: grid;
	gap: var(--s-32);
}

.about-intro__photo {
	position: relative;
	margin: 0;
}

.about-intro__photo img {
	width: 100%;
	height: 320px;
	object-fit: cover;
	object-position: 50% 20%;
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-card);
}

.about-intro__badge {
	position: absolute;
	right: -8px;
	bottom: -20px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px var(--s-16);
	background: var(--c-white);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-card);
	font-size: 13px;
	line-height: 1.4;
	color: var(--c-grey-600);
}

.about-intro__badge strong {
	display: block;
	color: var(--c-navy);
}

.about-intro__text {
	display: flex;
	flex-direction: column;
	gap: var(--s-24);
}

.mini-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mini-card {
	display: flex;
	flex-direction: column;
	gap: var(--s-8);
	padding: var(--s-16);
	background: var(--c-white);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-card);
	font-size: 13px;
	line-height: 1.4;
	color: var(--c-grey-600);
}

.mini-card strong {
	color: var(--c-navy);
}

.mini-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--c-blue-50);
}

.mini-card__icon .icon {
	width: 20px;
	height: 20px;
}

@media (max-width: 599px) {
	.mini-cards {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 900px) {
	.about-intro {
		grid-template-columns: 520px minmax(0, 1fr);
		gap: var(--s-64);
		align-items: center;
	}

	.about-intro__photo img {
		height: 440px;
	}
}

/* About: text + photo bento */
.gallery-bento {
	display: grid;
	gap: var(--s-24);
}

.gallery-bento__text {
	display: flex;
	flex-direction: column;
	gap: var(--s-16);
}

.gallery-bento__label {
	font-size: 15px;
	font-weight: 700;
	color: var(--c-blue-dark);
}

.gallery-bento__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gallery-bento__item {
	position: relative;
	overflow: hidden;
	border-radius: var(--r-md);
}

.gallery-bento__item img {
	width: 100%;
	height: 100%;
	min-height: 160px;
	object-fit: cover;
}

.gallery-bento__cap {
	position: absolute;
	left: 10px;
	bottom: 10px;
	max-width: calc(100% - 20px);
	padding: 4px 10px;
	border-radius: var(--r-pill);
	background: var(--c-white);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--c-navy);
}

@media (min-width: 900px) {
	.gallery-bento {
		grid-template-columns: 380px minmax(0, 1fr);
		gap: var(--s-48);
		align-items: center;
	}

	.gallery-bento__grid {
		grid-template-columns: 1.2fr 0.6fr 0.6fr;
		grid-template-rows: 220px 220px;
		gap: var(--s-16);
	}

	.gallery-bento__item--1 {
		grid-row: 1 / span 2;
	}

	.gallery-bento__item--2 {
		grid-column: 2 / span 2;
	}
}

/* Contact: grey checklist card; panel photo */
.check-card--grey {
	background: var(--c-grey-50);
	border-radius: var(--r-xl);
}

.panel__photo {
	width: 100%;
	height: 200px;
	margin-top: var(--s-8);
	object-fit: cover;
	border-radius: var(--r-lg);
}

.panel__small {
	font-size: 13px;
	color: var(--c-grey-600);
}

@media (min-width: 900px) {
	.panel__photo {
		height: 200px;
	}
}

/* Icon cards with icons on light tiles (homepage "Why choose") */
.icon-cards--tiles .icon {
	box-sizing: content-box;
	padding: var(--s-8);
	border-radius: 10px;
	background: var(--c-blue-50);
}

/* Job names in the price table are links to the service: a full-height tap target */
.price-table th a {
	display: inline-block;
	padding-block: 10px;
	margin-block: -10px;
}

/* ===== v3 (client feedback 09.10.2026): WhatsApp band, work photos, recent jobs, trust toast ===== */

/* Call band: its own section between the services and the reviews (was the WhatsApp band until 19.10.2026) */
.call-band {
	padding-block: 40px;
}

.call-band--grey {
	background: var(--c-section-grey);
}

.call-band__card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: var(--s-24) 20px;
	background: var(--c-blue-50);
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-card);
}

.call-band--grey .call-band__card {
	background: var(--c-white);
}

.call-band__text p {
	margin-top: var(--s-8);
}

.call-band .btn-call {
	justify-content: center;
}

@media (min-width: 900px) {
	.call-band {
		padding-block: 56px;
	}

	.call-band__card {
		flex-direction: row;
		align-items: center;
		gap: var(--s-32);
		padding: 36px var(--s-48);
	}

	.call-band__text {
		flex: 1;
		min-width: 0;
	}

	.call-band .btn-call {
		flex: none;
	}
}

/* Checklist + 2 x 2 work photos (town services, uPVC gearbox section) */
.list-photos {
	display: grid;
	gap: var(--s-24);
}

.list-photos__list {
	display: flex;
	flex-direction: column;
	gap: var(--s-16);
}

.list-photos__list .check-list li {
	align-items: flex-start;
}

.list-photos__call {
	order: 3;
}

.work-photos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.work-photos figure {
	position: relative;
	height: 200px;
	margin: 0;
	overflow: hidden;
	border-radius: var(--r-md);
}

.work-photos img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.work-photos figcaption {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 10px;
	width: fit-content;
	max-width: calc(100% - 20px);
	padding: 6px var(--s-12);
	border-radius: var(--r-md);
	background: rgba(255, 255, 255, 0.94);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

/* Mobile: list, photos, then the Call button on full width (Figma town page / Mobile) */
@media (max-width: 899px) {
	.list-photos__list {
		display: contents;
	}

	.list-photos__list > h2 {
		margin-bottom: calc(-1 * var(--s-8));
	}

	.list-photos .list-photos__call {
		width: 100%;
	}
}

@media (min-width: 900px) {
	.list-photos {
		grid-template-columns: minmax(0, 1fr) 480px;
		align-items: start;
		gap: var(--s-64);
	}

	.list-photos__list .check-list li {
		align-items: center;
	}

	.list-photos__call {
		align-self: flex-start;
		margin-top: var(--s-8);
	}

	.work-photos {
		gap: var(--s-16);
	}

	.work-photos figure {
		height: 220px;
	}

	/* Short captions stay a pill on one line; longer ones wrap inside the photo */
	.work-photos figcaption {
		border-radius: var(--r-md);
	}
}

/* Reviews section: local line above (town), "Recent jobs" strip below */
.block-reviews .lead {
	margin-bottom: var(--s-32);
}

.recent-jobs {
	margin-top: var(--s-8);
}

.recent-jobs h3 {
	margin-bottom: var(--s-16);
}

.recent-jobs__list {
	display: flex;
	gap: var(--s-12);
	margin: 0 calc(-1 * var(--gutter));
	padding: 0 var(--gutter);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--gutter);
	scrollbar-width: none;
	list-style: none;
}

.recent-jobs__list::-webkit-scrollbar {
	display: none;
}

.recent-jobs__list li {
	flex: 0 0 150px;
	scroll-snap-align: start;
}

.recent-jobs__list img {
	width: 100%;
	height: 170px;
	object-fit: cover;
	border-radius: var(--r-md);
}

.town-photo {
	margin-top: var(--s-32);
}

@media (min-width: 900px) {
	.block-reviews .reviews + .recent-jobs {
		margin-top: var(--s-32);
	}

	.recent-jobs__list {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 20px;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.recent-jobs__list img {
		height: 200px;
	}

	.town-photo {
		display: none;
	}
}

/* Price panel: text + photo of real work (the form moved after the FAQ) */
.panel__side-photo {
	display: none;
}

@media (min-width: 900px) {
	.panel--price {
		grid-template-columns: minmax(0, 1fr) 408px;
	}

	.panel--no-photo {
		grid-template-columns: minmax(0, 760px);
	}

	.panel__side-photo {
		position: relative;
		display: block;
		width: 100%;
		height: 300px !important;
		object-fit: cover;
		border-radius: var(--r-lg);
	}
}

/* Callback section after the FAQ: on mobile only the form card (Figma "Callback form" / Mobile) */
@media (max-width: 899px) {
	.block-callback .callback-section__text {
		display: none;
	}
}

/* Problem cards: icon tile + title only, 4 in a row */
.icon-card--title {
	gap: var(--s-16);
}

.icon-card--title h3 {
	font-size: var(--t-h3);
}

@media (min-width: 600px) and (max-width: 899px) {
	.icon-cards--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.icon-cards--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--s-12);
	}

	.icon-cards--4 .icon-card {
		padding: var(--s-16);
	}
}

@media (min-width: 900px) {
	.icon-cards--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Photo tiles with text: scrim so white text reads on bright photos */
.feature-tile::after {
	background: linear-gradient(to bottom, rgba(22, 39, 56, 0) 35%, rgba(22, 39, 56, 0.65) 62%, rgba(22, 39, 56, 0.94));
}

/* Short pages (thank you, 404): the footer stays at the bottom of tall screens */
body.exact {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

body.exact > main {
	flex: 1 0 auto;
}

/* Trust toast: rotating messages, bottom-left on desktop, above the sticky call bar on mobile */
.trust-toast {
	position: fixed;
	left: var(--s-12);
	right: var(--s-12);
	bottom: var(--s-12);
	z-index: 40;
	display: flex;
	align-items: center;
	gap: var(--s-12);
	padding: var(--s-12) 14px var(--s-12) var(--s-16);
	background: var(--c-white);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-card);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.35s ease, transform 0.35s ease, bottom 0.25s ease;
	pointer-events: none;
}

.trust-toast[hidden] {
	display: none;
}

.trust-toast.is-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* Sticky call bar (mobile) is about 80px high: lift the toast above it */
@media (max-width: 899px) {
	.sticky-call.is-visible ~ .trust-toast {
		bottom: calc(80px + env(safe-area-inset-bottom) + var(--s-12));
	}
}

.trust-toast__icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--r-pill);
	background: var(--c-blue-100);
}

.trust-toast__icon .icon {
	width: 18px;
	height: 18px;
	color: var(--c-blue-dark);
}

.trust-toast--dot .trust-toast__icon {
	background: #d5f0df;
}

.trust-toast__dot {
	width: 12px;
	height: 12px;
	border-radius: var(--r-pill);
	background: #1da851;
}

.trust-toast__text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
	color: var(--c-grey-600);
}

.trust-toast__text strong {
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-navy);
}

.trust-toast__close {
	flex: none;
	width: 32px;
	height: 32px;
	margin: -4px -6px -4px 0;
	padding: 0;
	border: 0;
	border-radius: var(--r-pill);
	background: none;
	color: var(--c-grey-600);
	font: 800 20px/1 var(--f-body);
	cursor: pointer;
}

@media (min-width: 900px) {
	.trust-toast {
		left: var(--s-24);
		right: auto;
		bottom: var(--s-24);
		max-width: 420px;
	}

	.trust-toast__text {
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.trust-toast {
		transition: none;
		transform: none;
	}
}

@media print {
	.trust-toast {
		display: none;
	}
}

/* Heroes without a photo: Figma padding 48 / 56, no extra centring offsets of the photo layout */
@media (min-width: 900px) {
	.hero--plain,
	.hero--contact {
		padding-block: var(--s-48) 56px;
	}

	.hero--plain .hero__head,
	.hero--contact .hero__head {
		padding-top: 0;
	}

	.hero--plain .hero__body,
	.hero--contact .hero__body {
		padding-bottom: 0;
	}
}

/* Line under the photo in the form panel (Contact: "Prefer email? ...") */
.panel .panel__text > .panel__small {
	font-size: 15px;
	color: var(--c-navy);
}

.panel__text .check-list {
	margin-left: 0;
	padding-left: 0;
}

/* Photos next to the callback form: frame heights from Figma (home 528 x 300, contact 528 x 240) */
@media (min-width: 900px) {
	.panel__photo {
		height: 300px;
	}

	.hero--contact ~ .section--panel .panel__photo {
		height: 240px;
	}
}

/* ===== Mobile details from the Figma mobile frames (comparison 13.10.2026) ===== */

.icon-card__check {
	display: none;
}

@media (max-width: 899px) {
	/* Call button under a section: full width */
	.block__call,
	.list-photos .list-photos__call {
		display: flex;
		width: 100%;
	}

	/* "Why us" cards with plain icons read as a compact check list: "Title: text" */
	.icon-cards--plain {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s-12);
	}

	.icon-cards--plain .icon-card:not(.icon-card--compact, .icon-card--title) {
		display: block;
		position: relative;
		padding: 0 0 0 32px;
		background: none;
		border-radius: 0;
		box-shadow: none;
	}

	.icon-cards--plain .icon-card:not(.icon-card--compact, .icon-card--title) .icon-card__icon {
		display: none;
	}

	.icon-cards--plain .icon-card:not(.icon-card--compact, .icon-card--title) .icon-card__check {
		display: block;
		position: absolute;
		top: 2px;
		left: 0;
		width: 22px;
		height: 22px;
	}

	.icon-cards--plain .icon-card:not(.icon-card--compact, .icon-card--title) h3 {
		float: left;
		margin-right: 0.3em;
		font-family: var(--f-body);
		font-size: var(--t-body);
		font-weight: 600;
		line-height: 1.55;
		letter-spacing: 0;
	}

	.icon-cards--plain .icon-card:not(.icon-card--compact, .icon-card--title) h3::after {
		content: ":";
	}

	.icon-cards--plain .icon-card:not(.icon-card--compact, .icon-card--title) p {
		font-size: var(--t-body);
		font-weight: 600;
		line-height: 1.55;
		color: var(--c-navy);
	}

	.icon-cards--plain .icon-card:not(.icon-card--compact, .icon-card--title) p::first-letter {
		text-transform: lowercase;
	}

	/* FAQ: heading and questions only */
	.faq__intro > p:not(.faq-group__count) {
		display: none;
	}

	.faq-group .faq__intro > p {
		display: block;
	}

	/* Prices: no big "from" card, cost factors as a plain check list */
	.price-card--big {
		display: none;
	}

	.list-cards li {
		padding: 0;
		background: none;
		border-radius: 0;
		box-shadow: none;
	}

	/* Contact: the form card first, then the email line */
	.hero--contact ~ .section--panel .panel__text > :not(.panel__small) {
		display: none;
	}

	.hero--contact ~ .section--panel .panel__text {
		order: 2;
	}
}

/* Homepage services on mobile: 2 x 4 compact tiles instead of the photo tile and text cards */
.service-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.service-tiles a {
	display: flex;
	flex-direction: column;
	gap: var(--s-12);
	height: 100%;
	min-height: 132px;
	padding: 14px;
	background: var(--c-white);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-card);
	font-family: var(--f-head);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-navy);
	text-decoration: none;
}

@media (max-width: 899px) {
	.bento--services,
	.bento--services + .block__note {
		display: none;
	}

	/* Hub areas table: the two columns read as one card */
	.area-list {
		gap: 0;
		background: var(--c-white);
		border-radius: var(--r-xl);
		box-shadow: var(--shadow-card);
	}

	.area-list__card {
		background: none;
		border-radius: 0;
		box-shadow: none;
		padding-block: 0;
	}

	.area-list__card:first-child {
		padding-top: var(--s-8);
	}

	.area-list__card:last-child {
		padding-bottom: var(--s-8);
	}

	.area-list__card:not(:last-child) .area-row:last-child {
		border-bottom: 1px solid var(--c-grey-200);
	}

	.area-row {
		flex-wrap: wrap;
	}

	.area-row__name {
		flex: 1 1 60%;
	}

	.area-row__codes {
		max-width: none;
		justify-content: flex-start;
	}

	/* Several postcode pills: on their own line under the name */
	.area-row__codes:has(.pill + .pill) {
		flex-basis: 100%;
		padding-left: 44px;
	}

	/* Hub: the side checklist card is desktop only */
	.page-hub .block-check .check-card:has(.check-list) {
		display: none;
	}
}

@media (min-width: 900px) {
	.service-tiles {
		display: none;
	}
}

/* Hub: the photo next to the intro text is desktop only (Figma Hub / Mobile) */
@media (max-width: 899px) {
	.page-hub .block-text__photo {
		display: none;
	}
}

/* Text block with the photo on the left, half of the width (mirrors the usual text + side card rhythm) */
@media (min-width: 900px) {
	.block-text--left {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.block-text--left .block-text__photo {
		order: -1;
	}

	.block-text--left .block-text__photo img {
		height: 380px;
		border-radius: var(--r-xl);
		box-shadow: var(--shadow-card);
	}
}

/* Checklist block as a banner: text + white card inside the light panel */
.panel--check .check-card {
	position: relative;
}

.panel.panel--check .panel__text > p:nth-of-type(n) {
	font-size: var(--t-body);
	color: var(--c-navy);
}

@media (min-width: 900px) {
	.panel--check {
		grid-template-columns: minmax(0, 1fr) 420px;
	}
}

/* Call button glow: hero and CTA bands (client request 09.10: make the Call button stand out). */
.hero .btn-call,
.cta-band .btn-call {
	--glow: color-mix(in srgb, var(--c-blue-light) 55%, transparent);
	position: relative;
	box-shadow: var(--shadow-call), 0 0 26px var(--glow);
}

.cta-band--dark .btn-call {
	--glow: color-mix(in srgb, var(--c-blue-light) 70%, transparent);
}

.hero .btn-call::after,
.cta-band .btn-call::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 var(--glow);
	pointer-events: none;
	animation: call-glow 2.4s ease-out infinite;
}

@keyframes call-glow {
	0% {
		box-shadow: 0 0 0 0 var(--glow);
		opacity: 1;
	}

	70%,
	100% {
		box-shadow: 0 0 0 16px var(--glow);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero .btn-call::after,
	.cta-band .btn-call::after {
		animation: none;
		box-shadow: none;
	}
}

/* Light motion: sections fade up on scroll (class added by site.js), linked cards lift on hover. */
.reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (hover: hover) {
	.link-card,
	.feature-tile,
	.chip--link {
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	.link-card:hover,
	.feature-tile:hover {
		transform: translateY(-4px);
		box-shadow: var(--shadow-card), 0 14px 24px color-mix(in srgb, var(--c-blue-dark) 14%, transparent);
	}

	.chip--link:hover {
		transform: translateY(-2px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.link-card,
	.feature-tile,
	.chip--link {
		transition: none;
	}

	.link-card:hover,
	.feature-tile:hover,
	.chip--link:hover {
		transform: none;
	}
}

@media print {
	.reveal {
		opacity: 1;
		transform: none;
	}
}

/* Area lists in groups: Bristol and the South West first, far regions after (decision 13.10.2026). */
.hub-group {
	margin-top: var(--s-32);
}

.hub-group h3 {
	margin-bottom: var(--s-16);
}

.block-areas__group {
	margin: var(--s-24) 0 18px;
	line-height: 1.55;
}

@media (min-width: 900px) {
	.hub-group {
		margin-top: var(--s-48);
	}
}

/* Header navigation: Services and Areas with a list of pages (dropdown on desktop, expandable row on mobile). */
.site-nav__item--sub {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px solid var(--c-grey-200);
}

.site-nav__sub-toggle {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-8);
	min-height: 48px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-navy);
	text-align: left;
	cursor: pointer;
}

.site-nav__sub-toggle:hover,
.site-nav__sub-toggle:focus {
	background: transparent;
	color: var(--c-blue-dark);
}

.site-nav__sub-toggle .icon {
	width: 18px;
	height: 18px;
	transition: transform 0.15s ease;
}

.site-nav__item--sub.is-open .site-nav__sub-toggle .icon {
	transform: rotate(180deg);
}

.site-nav__sub {
	display: none;
	flex-basis: 100%;
}

.site-nav__item--sub.is-open .site-nav__sub {
	display: block;
}

.site-nav__sub-panel {
	padding: 0 0 var(--s-12) var(--s-16);
}

.site-nav__sub ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__sub a {
	min-height: 44px;
	font-size: 16px;
	font-weight: 600;
	border-bottom: 0;
}

.site-nav__sub-label {
	margin: var(--s-12) 0 var(--s-4);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--c-grey-600);
}

/* The open mobile menu can be taller than the screen now. */
.site-nav[open] .site-nav__list {
	max-height: calc(100vh - 64px);
	max-height: calc(100dvh - 64px);
	overflow-y: auto;
}

@media (min-width: 900px) {
	.site-nav-desktop .site-nav__item--sub {
		position: relative;
		flex-wrap: nowrap;
		border: 0;
	}

	.site-nav-desktop .site-nav__sub-toggle {
		flex: none;
		gap: 4px;
		min-height: 0;
		font-size: 15px;
	}

	.site-nav-desktop .site-nav__sub-toggle .icon {
		width: 14px;
		height: 14px;
	}

	/* The wrapper starts right under the item, so the pointer can travel to the panel without closing it. */
	.site-nav-desktop .site-nav__sub {
		position: absolute;
		top: 100%;
		left: -20px;
		z-index: 60;
		padding-top: 26px;
	}

	.site-nav-desktop .site-nav__item--sub:hover .site-nav__sub,
	.site-nav-desktop .site-nav__item--sub.is-open .site-nav__sub {
		display: block;
	}

	.site-nav-desktop .site-nav__item--sub:hover .site-nav__sub-toggle .icon {
		transform: rotate(180deg);
	}

	.site-nav-desktop .site-nav__sub-panel {
		min-width: 264px;
		padding: var(--s-12);
		background: var(--c-white);
		border: 1px solid var(--c-grey-200);
		border-radius: var(--r-lg);
		box-shadow: var(--shadow-card);
	}

	.site-nav-desktop .site-nav__item--areas .site-nav__sub-panel {
		width: 420px;
	}

	.site-nav-desktop .site-nav__item--areas .site-nav__sub ul {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--s-8);
	}

	.site-nav-desktop .site-nav__list .site-nav__sub a {
		display: flex;
		min-height: 40px;
		padding: 0 var(--s-12);
		font-size: 15px;
		font-weight: 600;
		border-radius: var(--r-md, 10px);
	}

	.site-nav-desktop .site-nav__list .site-nav__sub a:hover,
	.site-nav-desktop .site-nav__list .site-nav__sub a:focus {
		background: var(--c-blue-50);
		color: var(--c-blue-dark);
	}

	.site-nav-desktop .site-nav__sub-label {
		margin: var(--s-12) var(--s-12) var(--s-4);
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-nav__sub-toggle .icon {
		transition: none;
	}
}

/* Cookie banner (CookieYes plugin). Button colours come from the banner settings (bin/seed/cookieyes.php);
   here only what its settings cannot do: our fonts, card shape, link colour, and room for the sticky call bar. */
.cky-consent-container,
.cky-modal {
	font-family: var(--f-body);
}

.cky-consent-container .cky-consent-bar {
	border-color: var(--c-grey-200) !important;
	border-radius: var(--r-md);
	box-shadow: var(--shadow-card);
}

.cky-consent-container .cky-btn,
.cky-modal .cky-btn {
	border-radius: var(--r-pill);
	font-weight: 700;
}

.cky-notice-des a.cky-policy,
.cky-notice-des button.cky-policy {
	color: var(--c-blue-dark) !important;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cky-btn:focus-visible,
.cky-notice-des a.cky-policy:focus-visible {
	outline-color: var(--c-blue-light);
}

/* Mobile: while the sticky call bar is shown, the banner sits on top of it (site.js sets the height). */
.has-sticky-call .cky-consent-container {
	bottom: var(--sticky-call-h, 0px);
	transition: bottom 0.2s ease;
}

@media (max-width: 440px) {
	.cky-consent-container .cky-consent-bar {
		border-radius: var(--r-md) var(--r-md) 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.has-sticky-call .cky-consent-container {
		transition: none;
	}
}

/* Call popup: once per session after 8 s (site.js). Mobile: bottom sheet; desktop: centred card. */
.call-popup {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.call-popup[hidden] {
	display: none;
}

.call-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(22, 39, 56, 0.55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.call-popup__dialog {
	position: relative;
	width: 100%;
	max-height: calc(100dvh - 24px);
	overflow: auto;
	background: var(--c-white);
	border-radius: var(--r-xl) var(--r-xl) 0 0;
	box-shadow: 0 -10px 40px rgba(22, 39, 56, 0.28);
	transform: translateY(100%);
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	outline: none;
}

.call-popup.is-open .call-popup__backdrop {
	opacity: 1;
}

.call-popup.is-open .call-popup__dialog {
	transform: none;
}

.call-popup__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 4px 12px rgba(22, 39, 56, 0.2);
	color: var(--c-navy);
	cursor: pointer;
}

.call-popup__close svg {
	width: 20px;
	height: 20px;
}

.call-popup__media {
	position: relative;
	height: 150px;
	overflow: hidden;
	background: var(--grad-help);
}

.call-popup__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 12%;
}

.call-popup__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(22, 39, 56, 0) 35%, rgba(22, 39, 56, 0.75) 100%);
}

.call-popup__tag {
	position: absolute;
	left: 20px;
	bottom: 14px;
	z-index: 1;
	padding: 5px 12px;
	border-radius: var(--r-pill);
	background: rgba(22, 39, 56, 0.72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--c-white);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.3;
}

.call-popup__body {
	padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
}

.call-popup__title {
	font-size: 28px;
	line-height: 1.12;
}

.call-popup__text {
	margin-top: 10px;
	color: var(--c-grey-600);
	font-size: 16px;
	line-height: 1.5;
}

.call-popup__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 20px;
	padding: 0;
	list-style: none;
}

.call-popup__facts li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 6px 9px;
	border-radius: var(--r-pill);
	background: var(--c-blue-50);
	color: var(--c-navy);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
}

.call-popup__facts .icon {
	width: 18px;
	height: 18px;
	color: var(--c-blue-dark);
}

.call-popup__call .icon {
	animation: exact-ring 4s ease-in-out 0.6s infinite;
}

@media (min-width: 600px) {
	.call-popup {
		align-items: center;
		padding: 24px;
	}

	.call-popup__dialog {
		max-width: 440px;
		border-radius: var(--r-xl);
		box-shadow: 0 30px 80px rgba(22, 39, 56, 0.35);
		transform: translateY(24px) scale(0.96);
		opacity: 0;
		transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
	}

	.call-popup.is-open .call-popup__dialog {
		opacity: 1;
	}

	.call-popup__media {
		height: 180px;
	}

	.call-popup__body {
		padding: 26px 28px 28px;
	}

	.call-popup__title {
		font-size: 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.call-popup__backdrop,
	.call-popup__dialog {
		transition: none;
	}

	.call-popup__call .icon {
		animation: none;
	}
}