/*
 * Steen theme styles.
 *
 * Loaded after Bootstrap and tokens.css, so rules here override Bootstrap.
 * Colours and fonts always come from the tokens (var(--...)).
 *
 * Contents:
 *  1. Bootstrap variables mapped to our tokens
 *  2. Typography
 *  3. Focus, skip link, motion
 *  4. Buttons (Bootstrap and block editor)
 *  5. Sections and cards
 *  6. Header and logo
 *  7. Main menu (desktop dropdowns, mobile offcanvas)
 *  8. Footer
 *  9. Floating WhatsApp button
 * 10. Home page: hero, licences strip, steps, cards, why us, testimonials,
 *     team, quote band, trust badges and CTA buttons
 * 11. Inner pages: page header, breadcrumbs, entry content, side panel,
 *     highlights, project details, project filter, galleries
 */

/* ---------- 1. Bootstrap variables ---------- */

:root {
	--bs-body-font-family: var(--font-body);
	--bs-body-font-size: 1.0625rem;
	--bs-body-line-height: 1.7;
	--bs-body-color: var(--color-ink);
	--bs-body-bg: var(--color-white);
	--bs-heading-color: var(--color-deep);
	--bs-secondary-color: var(--color-muted);
	--bs-border-color: var(--color-border);
	--bs-border-radius: var(--radius);
	--bs-border-radius-lg: var(--radius-lg);
	--bs-primary: var(--color-primary);
	--bs-primary-rgb: var(--color-primary-rgb);
	--bs-link-color: var(--color-primary);
	--bs-link-color-rgb: var(--color-primary-rgb);
	--bs-link-hover-color: var(--color-deep);
	--bs-link-hover-color-rgb: var(--color-deep-rgb);
}

/*
 * Icons: inline SVG from steen_icon(), sized and coloured like text.
 * One line tall (1lh) with the icon centred, like the old icon font, so icons
 * line up with the first line of text next to them.
 */
.bi {
	display: inline-block;
	flex-shrink: 0;
	width: 1em;
	height: 1em;
	height: 1lh;
	vertical-align: top;
	overflow: visible;
}

/* ---------- 2. Typography ---------- */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: var(--lh-heading);
	letter-spacing: -0.01em;
	color: var(--bs-heading-color);
	text-wrap: balance;
}

/* Raleway's default numbers dip below the line; phone and licence numbers read better level. */
html {
	font-variant-numeric: lining-nums;
}

/* One type scale (tokens.css): h1 page titles, h2 section titles, h3 panel
   titles, h4 card titles, h5 small list titles. */
h1, .h1 { font-size: var(--fs-display); line-height: var(--lh-display); }
h2, .h2 { font-size: var(--fs-section); }
h3, .h3 { font-size: var(--fs-panel); }
h4, .h4 { font-size: var(--fs-card); }
h5, .h5 { font-size: var(--fs-item); }
h6, .h6 { font-size: 1rem; }

/* The gap under a title: a little more under the large ones. */
h1, .h1, h2, .h2, h3, .h3 { margin-bottom: var(--space-title); }
h4, .h4, h5, .h5, h6, .h6 { margin-bottom: var(--space-title-sm); }

p,
li {
	text-wrap: pretty;
}

.lead {
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.7;
	color: var(--color-muted);
}

.text-muted,
.text-body-secondary {
	color: var(--color-muted) !important;
}

/* Short paragraphs read better at a limited width (the same for every
   introduction and paragraph on the site). */
.entry-content > p,
.measure {
	max-width: var(--measure);
}

/* ---------- 3. Focus, skip link, motion ---------- */

:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
}

.btn:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
	box-shadow: none;
}

.site-header :focus-visible,
.site-footer :focus-visible,
.section--dark :focus-visible {
	outline-color: var(--color-focus-on-dark);
}

/* Form fields (every form on the site): instead of the thick outline, a thin
   Steen-blue border and a soft blue glow while the visitor types. The ring
   is still clearly visible (blue on white is 7.7:1); the transparent outline
   shows in Windows high-contrast mode, where shadows are not drawn. */
:where(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"]), select, textarea):focus,
.form-control:focus,
.form-select:focus {
	outline: 2px solid transparent;
	outline-offset: 0;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 1px var(--color-primary), 0 0 0 5px rgba(var(--color-primary-rgb), 0.18);
}

/* Tick boxes and round buttons: a thinner ring with a little space around it. */
:where(input[type="checkbox"], input[type="radio"]):focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px rgba(var(--color-primary-rgb), 0.15);
}

.skip-link:focus {
	position: fixed !important;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100000;
	padding: 0.75rem 1rem;
	background: var(--color-white);
	color: var(--color-deep);
	font-weight: 700;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

/* The skip link moves focus to <main> (tabindex="-1"); no outline around the whole page. */
.site-main:focus {
	outline: 0;
}

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

	/* Less motion: hover effects keep their colour changes but nothing moves,
	   zooms or lifts. */
	.card-steen:hover,
	.card-steen:focus-within,
	.card-steen--link:hover .card-steen__media img,
	.card-steen--link:hover .card-steen__more .bi,
	.steen-pagination a:hover .bi,
	.contact-map__link a:hover .bi,
	.footer-menu a:hover .footer-menu__chevron,
	.steen-menu .menu-item-all a:hover .dropdown-all__arrow,
	.steen-menu .sub-menu {
		transform: none !important;
	}
}

/* ---------- 4. Buttons ---------- */

.btn {
	--bs-btn-font-family: var(--font-nav);
	--bs-btn-font-size: 0.9375rem;
	--bs-btn-font-weight: 700;
	--bs-btn-padding-x: 1.5rem;
	--bs-btn-padding-y: 0.6875rem;
	--bs-btn-border-radius: var(--radius);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	letter-spacing: 0.01em;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* Buttons lift a little on hover. */
.btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(var(--color-deep-rgb), 0.18);
}

.btn:active {
	transform: none;
}

.btn-sm {
	--bs-btn-padding-x: 0.875rem;
	--bs-btn-padding-y: 0.4375rem;
	--bs-btn-font-size: 0.9375rem;
}

.btn-lg {
	--bs-btn-padding-x: 1.875rem;
	--bs-btn-padding-y: 0.9375rem;
	--bs-btn-font-size: 1rem;
}

/* Main action: Request a Quote. Red is used for nothing else. */
.btn-quote {
	--bs-btn-color: var(--color-white);
	--bs-btn-bg: var(--color-accent);
	--bs-btn-border-color: var(--color-accent);
	--bs-btn-hover-color: var(--color-white);
	--bs-btn-hover-bg: var(--color-accent-hover);
	--bs-btn-hover-border-color: var(--color-accent-hover);
	--bs-btn-active-color: var(--color-white);
	--bs-btn-active-bg: var(--color-accent-hover);
	--bs-btn-active-border-color: var(--color-accent-hover);
}

.btn-primary {
	--bs-btn-bg: var(--color-primary);
	--bs-btn-border-color: var(--color-primary);
	--bs-btn-hover-bg: var(--color-deep);
	--bs-btn-hover-border-color: var(--color-deep);
	--bs-btn-active-bg: var(--color-deep);
	--bs-btn-active-border-color: var(--color-deep);
}

/* Secondary button on light backgrounds: white with a soft shadow and a blue edge. */
.btn-outline-primary {
	--bs-btn-color: var(--color-primary);
	--bs-btn-bg: var(--color-white);
	--bs-btn-border-color: rgba(var(--color-primary-rgb), 0.45);
	--bs-btn-hover-color: var(--color-white);
	--bs-btn-hover-bg: var(--color-primary);
	--bs-btn-hover-border-color: var(--color-primary);
	--bs-btn-active-color: var(--color-white);
	--bs-btn-active-bg: var(--color-deep);
	--bs-btn-active-border-color: var(--color-deep);
	box-shadow: var(--shadow-soft);
}

/* Request a Quote: a red glow on hover. */
.btn-quote:hover {
	box-shadow: 0 10px 24px rgba(var(--color-accent-rgb), 0.32);
}

.btn-whatsapp {
	--bs-btn-color: var(--color-white);
	--bs-btn-bg: var(--color-whatsapp);
	--bs-btn-border-color: var(--color-whatsapp);
	--bs-btn-hover-color: var(--color-white);
	--bs-btn-hover-bg: var(--color-whatsapp-hover);
	--bs-btn-hover-border-color: var(--color-whatsapp-hover);
	--bs-btn-active-color: var(--color-white);
	--bs-btn-active-bg: var(--color-whatsapp-hover);
	--bs-btn-active-border-color: var(--color-whatsapp-hover);
}

/*
 * Block editor buttons (Buttons block), so editor content matches the theme.
 * Same size as .btn: 15 px text, 11 x 24 px padding and a 1 px border.
 * A size picked in the editor (has-custom-font-size) still wins.
 */
.wp-block-button__link {
	font-family: var(--font-nav);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.01em;
	padding: 0.6875rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background-color: var(--color-primary);
	color: var(--color-white);
	text-decoration: none;
}

.wp-block-button__link:hover {
	background-color: var(--color-deep);
	color: var(--color-white);
}

.wp-block-button.is-style-quote .wp-block-button__link {
	background-color: var(--color-accent);
}

.wp-block-button.is-style-quote .wp-block-button__link:hover {
	background-color: var(--color-accent-hover);
}

/* WordPress adds its own outline padding; 1 px less padding than the filled
   button makes up for the thicker border, so both are exactly as tall. */
.wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--color-primary);
	border: 2px solid currentcolor;
	padding: 0.625rem 1.4375rem;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

/* ---------- 5. Sections and cards ---------- */

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

.section--alt {
	background-color: var(--color-surface);
}

.section--dark {
	--bs-heading-color: var(--color-white);
	--bs-link-color-rgb: 127, 160, 255;
	--bs-link-hover-color-rgb: 255, 255, 255;
	background-color: var(--color-navy);
	color: var(--color-on-dark);
}

.section__header {
	max-width: 46rem;
	margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.section__header.text-center {
	margin-inline: auto;
}

/* Section title: Raleway Bold, 32 px on computers down to 26 px on phones, no underline. */
.section__title {
	margin-bottom: var(--space-title);
	font-size: var(--fs-section);
	color: var(--color-deep);
}

.section--dark .section__title {
	color: var(--color-white);
}

/* The introduction under a title: regular weight, about 670 px wide at most. */
.section__header .lead {
	max-width: var(--measure);
}

.section__header.text-center .lead {
	margin-inline: auto;
}

/* Centred short texts: lines of even length, instead of a long line followed
   by one or two stray words ("with you."). Left-aligned text keeps its full
   width, where balanced lines would look cut short. */
.section__header.text-center .lead,
.team-card__bio p {
	text-wrap: balance;
}

@media (min-width: 992px) {
	.timeline__text {
		text-wrap: balance;
	}
}

/* Small label above a heading, with a short line before it. */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	margin-bottom: var(--space-title);
	font-family: var(--font-nav);
	font-size: var(--label-size);
	font-weight: 700;
	letter-spacing: var(--label-tracking);
	text-transform: uppercase;
	color: var(--color-primary);
}

.eyebrow::before {
	content: "";
	width: 1.75rem;
	height: 2px;
	background: currentcolor;
}

.section--dark .eyebrow {
	color: var(--color-primary-light);
}

/* Cards: white, rounded, a soft shadow; they lift on hover. */
.card-steen {
	height: 100%;
	background: var(--color-white);
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	overflow: hidden;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.card-steen:hover,
.card-steen:focus-within {
	box-shadow: var(--shadow-lg);
	transform: translateY(-4px);
}

.card-steen__body {
	position: relative;
	padding: clamp(1.5rem, 1.25rem + 1vw, 2rem);
}

/* Icon in a soft blue square; it fills with blue when the card is hovered. */
.card-steen__icon,
.icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 0.875rem;
	background: var(--color-primary-soft);
	color: var(--color-primary);
	font-size: 1.5rem;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.card-steen__icon {
	margin-bottom: 1.25rem;
}

.icon-tile--sm {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.625rem;
	font-size: 1.125rem;
}

.card-steen--link:hover .card-steen__icon {
	background: var(--color-primary);
	color: var(--color-white);
}

/* Large faint number in the corner of numbered cards (decoration only). */
.card-steen__number {
	position: absolute;
	top: 1.25rem;
	right: 1.5rem;
	font-family: var(--font-heading);
	font-size: 2.75rem;
	font-weight: 700;
	line-height: 1;
	color: var(--color-primary-soft);
	pointer-events: none;
}

/* Clickable cards: a blue line grows along the bottom on hover. */
.card-steen--link::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 3px;
	background: var(--color-primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.card-steen--link:hover::after {
	transform: scaleX(1);
}

/* Animation 5: blocks fade up as they scroll into view, photos settle in from
   slightly smaller. theme.js adds these classes, and only to blocks that start
   below the screen, so without JavaScript (or with less motion asked for)
   everything simply shows. Transforms only: nothing around them moves. */
.reveal {
	opacity: 0;
	transform: translateY(1rem);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal--photo {
	transform: scale(0.97);
}

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

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

/* ---------- 6. Header and logo ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 1030;
	background-color: var(--color-navy);
	color: var(--color-white);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
	transition: box-shadow 0.25s ease;
}

.site-header.is-scrolled {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

/* Top bar (desktop only): a light strip with the licence numbers on the left,
   contact details and social links on the right, each group split by thin lines. */
.topbar {
	background-color: var(--color-surface);
	color: var(--color-ink);
	font-size: 0.8125rem;
	border-bottom: 1px solid var(--color-border);
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 2.5rem;
}

.topbar__licences,
.topbar__list {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.topbar__licences li,
.topbar__list li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0 1rem;
	border-left: 1px solid var(--color-border);
	white-space: nowrap;
}

.topbar__licences li:first-child,
.topbar__list li:first-child {
	padding-left: 0;
	border-left: 0;
}

.topbar__licences {
	font-family: var(--font-nav);
	font-weight: 500;
	color: var(--color-deep);
}

.topbar__licences strong {
	font-weight: 700;
}

.topbar__list a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

/* Narrow computer screens: phone only, so the strip stays on one line. */
@media (max-width: 1199.98px) {
	.topbar__email {
		display: none !important;
	}
}

.topbar a {
	color: var(--color-ink);
	text-decoration: none;
}

.topbar a:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

.topbar .bi {
	flex-shrink: 0;
	color: var(--color-primary);
}

.topbar__end {
	display: flex;
	align-items: center;
}

.topbar .social-links {
	flex-wrap: nowrap;
	gap: 0.25rem;
	margin: 0;
	padding-left: 0.75rem;
	border-left: 1px solid var(--color-border);
	white-space: nowrap;
}

.topbar .social-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
}

.topbar .social-links a:hover {
	background: var(--color-primary-soft);
	text-decoration: none;
}

/* Logged in: sit below the WordPress admin bar (32px desktop, 46px below 783px). */
.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* Below 601px the admin bar scrolls away with the page, so stick to the very top. */
@media (max-width: 600px) {
	.admin-bar .site-header {
		top: 0;
	}
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 4.5rem;
}

.site-branding {
	display: flex; /* no text line around the logo, so it adds no height */
	flex-shrink: 0;
	margin-right: auto;
}

.site-branding .custom-logo-link {
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	text-decoration: none;
}

.site-branding .custom-logo {
	display: block;
	width: auto;
	height: 3.25rem;
}

/* White badge behind a logo that has a white background (Customizer switch).
   It sits on the image, so the company name beside it stays on the header colour. */
.site-branding--badge .custom-logo {
	height: 3.75rem;
	padding: 0.25rem 0.5rem;
	background: var(--color-white);
	border-radius: 0.75rem;
}

/* Company name beside the logo (header and footer): Site Title, with the last
   word ("Limited") as a small label underneath. White on navy by default;
   the white header style recolours it (section 7b). */
.wordmark {
	display: flex;
	flex-direction: column;
	gap: 0.3125rem;
	line-height: 1.1;
	white-space: nowrap;
}

.wordmark__name {
	font-family: var(--font-heading);
	font-size: var(--fs-card);
	font-weight: 700;
	color: var(--color-white);
	transition: color 0.2s ease;
}

.wordmark__suffix {
	font-family: var(--font-nav);
	font-size: var(--label-size);
	font-weight: 700;
	letter-spacing: var(--label-tracking);
	text-transform: uppercase;
	color: var(--color-primary-light);
}

a:hover .wordmark__name {
	color: var(--color-primary-light);
}

/* Below 1200px the header has room for the logo only (with the name, the menu
   and quote button would wrap at 992-1199px). The name is hidden visually but
   still read out as the link's text. */
@media (max-width: 1199.98px) {
	.site-branding .custom-logo-link:not(.brand--text-only) .wordmark {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

.header-call {
	font-family: var(--font-nav);
	font-weight: 500;
	color: var(--color-white);
	text-decoration: none;
	white-space: nowrap;
}

.header-call:hover {
	color: var(--color-primary-light);
}

.menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--radius);
	background: transparent;
	color: var(--color-white);
	font-size: 1.5rem;
}

.menu-toggle:hover {
	background: rgba(255, 255, 255, 0.1);
}

/* The header's quote button is a pill. */
.header-quote {
	--bs-btn-border-radius: 999px;
}

/* Smaller quote button in the header on phones, so logo, button and menu fit. */
@media (max-width: 991.98px) {
	.header-quote {
		--bs-btn-padding-x: 0.75rem;
		--bs-btn-padding-y: 0.5rem;
		--bs-btn-font-size: 0.875rem;
		white-space: nowrap;
	}
}

@media (min-width: 992px) {
	.site-header__inner {
		min-height: 5rem;
		gap: 1.5rem;
	}

	.site-branding .custom-logo {
		height: 4.5rem; /* 72 px in the 80 px bar */
	}

	/* With the white badge (navy header style) the badge adds 8 px, so the logo stays 64 px. */
	.site-branding--badge .custom-logo {
		height: 4.5rem;
	}
}

/* ---------- 7. Main menu ---------- */

.steen-menu,
.steen-menu .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.steen-menu a {
	display: block;
	font-family: var(--font-nav);
	font-weight: 400;
	text-decoration: none;
}

.submenu-toggle .bi {
	transition: transform 0.2s ease;
}

.is-open > .submenu-toggle .bi {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.submenu-toggle .bi {
		transition: none;
	}
}

/* Mobile and tablet: menu sits in the offcanvas panel (white). */
@media (max-width: 991.98px) {
	.site-nav-panel {
		--bs-offcanvas-width: min(22rem, 88vw);
		color: var(--color-ink);
	}

	/* Keep the panel below the admin bar when logged in. theme.js refines this
	   when the menu opens, because below 601px the admin bar scrolls away. */
	.admin-bar .site-nav-panel {
		top: var(--wp-admin--admin-bar--height, 0px);
	}

	.site-nav-panel .offcanvas-header {
		border-bottom: 1px solid var(--color-border);
	}

	.site-nav-panel .offcanvas-title {
		font-family: var(--font-heading);
		font-size: 1.125rem;
		color: var(--color-deep);
	}

	.steen-menu a {
		padding: 0.75rem 0;
		color: var(--color-deep);
		border-bottom: 1px solid var(--color-border);
	}

	.steen-menu a:hover,
	.steen-menu a[aria-current="page"] {
		color: var(--color-primary);
	}

	/* An item with sub-items: the link, then the arrow button beside it.
	   The sub-items fold out below, closed until the button is pressed (theme.js). */
	.steen-menu > .menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
	}

	.steen-menu > .menu-item-has-children > a {
		flex: 1 1 0;
		min-width: 0;
	}

	.submenu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 2.75rem;
		min-height: 2.75rem;
		padding: 0;
		border: 0;
		border-bottom: 1px solid var(--color-border);
		border-left: 1px solid var(--color-border);
		background: transparent;
		color: var(--color-deep);
		font-size: 1rem;
	}

	.submenu-toggle:hover {
		color: var(--color-primary);
		background: var(--color-surface);
	}

	/* The Services list folds out in a pale panel with a blue bar on top. */
	.steen-menu .sub-menu {
		display: none;
		flex: 0 0 100%;
		margin-top: -1px;
		padding: 0.625rem 0 0.875rem;
		background: var(--color-surface);
		border-top: 2px solid var(--color-primary);
		border-radius: 0 0 var(--radius) var(--radius);
	}

	.steen-menu > li.is-open > .sub-menu {
		display: block;
		animation: steen-fold-in 0.2s ease-out;
	}

	.steen-menu .sub-menu a {
		display: flex;
		align-items: center;
		gap: 0.875rem;
		padding: 0.625rem 0.875rem;
		border-bottom: 0;
		font-size: 0.9375rem;
	}

	.steen-menu .sub-menu .dropdown-icon {
		width: 1.75rem;
		height: 1.75rem;
		background: var(--color-white);
	}

	.steen-menu .sub-menu .menu-item-all a {
		padding-top: 0.625rem;
		font-size: 0.875rem;
	}

	.offcanvas-actions {
		display: grid;
		gap: 0.75rem;
		margin-top: 1.5rem;
	}
}

/* Desktop: menu sits inline in the navy header, dropdowns open on hover, focus or click. */
@media (min-width: 992px) {
	.steen-menu {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.steen-menu > li {
		position: relative;
		display: flex;
		align-items: center;
	}

	.steen-menu > li > a {
		position: relative;
		padding: 0.625rem 1rem;
		font-size: 0.9375rem;
		color: var(--color-white);
		border-radius: var(--radius);
		transition: color 0.2s ease;
	}

	/* A link with a dropdown arrow: less space on its right, so the arrow stays close. */
	.steen-menu > li.menu-item-has-children > a {
		padding-right: 0.25rem;
	}

	.steen-menu > li > a:hover,
	.steen-menu > li.is-open > a {
		color: var(--color-primary-light);
	}

	/* Current page (or the part of the site the visitor is in, e.g. Guides on
	   a blog post): a light-blue dot under the menu item. Not red: red is kept
	   for Request a Quote. */
	.steen-menu > li > a::after {
		content: "";
		position: absolute;
		bottom: 0.0625rem;
		left: 50%;
		width: 0.4375rem;
		height: 0.4375rem;
		border-radius: 50%;
		background: var(--color-primary-light);
		transform: translateX(-50%) scale(0);
		transition: transform 0.25s ease, width 0.25s ease, height 0.25s ease, border-radius 0.25s ease;
	}

	/* Animation 1: on hover the dot grows into a short line under the item. */
	.steen-menu > li > a:hover::after,
	.steen-menu > li.is-open > a::after {
		width: 1.25rem;
		height: 0.1875rem;
		border-radius: 2px;
		transform: translateX(-50%) scale(1);
	}

	.steen-menu > li > a[aria-current="page"]::after,
	.steen-menu > li.current-menu-ancestor > a::after,
	.steen-menu > li.current-menu-parent > a::after {
		transform: translateX(-50%) scale(1);
	}

	.submenu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 1.75rem;
		height: 1.75rem;
		margin-left: 0; /* next to the link, not over it, so both are easy to tap (WCAG target size) */
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--color-white);
		font-size: 0.75rem;
	}

	/* The dropdown: a white panel with a blue bar on top, a little below the
	   menu item. */
	.steen-menu .sub-menu {
		position: absolute;
		top: calc(100% + 0.5rem);
		left: 0;
		z-index: 1035;
		min-width: 20rem;
		padding: 0.75rem;
		background: var(--color-white);
		border-top: 3px solid var(--color-primary);
		border-radius: 0 0 0.75rem 0.75rem;
		box-shadow: var(--shadow-lg);

		/* Animation 2: closed = invisible and 6px lower (so it can't be clicked
		   or tabbed into); open = fades in and drops into place in 0.2s. */
		visibility: hidden;
		opacity: 0;
		transform: translateY(6px);
		pointer-events: none;
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
	}

	/* Invisible bridge over the gap above the panel, so the dropdown stays open
	   while the mouse moves down from Services. */
	.steen-menu .sub-menu::before {
		content: "";
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: calc(0.5rem + 3px);
	}

	.steen-menu > li:hover > .sub-menu,
	.steen-menu > li:focus-within > .sub-menu,
	.steen-menu > li.is-open > .sub-menu {
		visibility: visible;
		opacity: 1;
		transform: none;
		pointer-events: auto;
		transition-delay: 0s;
	}

	/* Escape hides the dropdown even while it is hovered or focused (theme.js). */
	.steen-menu > li.is-dismissed > .sub-menu {
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
	}

	.steen-menu .sub-menu li + li {
		margin-top: 0.125rem;
	}

	.steen-menu .sub-menu a {
		display: flex;
		align-items: center;
		gap: 0.875rem;
		padding: 0.6875rem 0.875rem;
		font-size: 0.9375rem;
		color: var(--color-deep);
		border-radius: var(--radius);
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	.steen-menu .sub-menu a:hover,
	.steen-menu .sub-menu a[aria-current="page"] {
		background: var(--color-surface);
		color: var(--color-primary);
	}

	.steen-menu .sub-menu a:hover .dropdown-icon,
	.steen-menu .sub-menu a[aria-current="page"] .dropdown-icon {
		background: var(--color-primary);
		color: var(--color-white);
	}

	/* "All services": under a thin line, blue, no hover panel. */
	.steen-menu .sub-menu .menu-item-all {
		margin-top: 0.5rem;
		padding-top: 0.5rem;
		border-top: 1px solid var(--color-border);
	}

	.steen-menu .sub-menu .menu-item-all a {
		font-size: 0.875rem;
	}

	.steen-menu .sub-menu .menu-item-all a:hover {
		background: transparent;
		text-decoration: underline;
	}

	.steen-menu .sub-menu :focus-visible {
		outline-color: var(--color-focus);
	}
}

/* Phone menu: the Services list fades in as it folds open. */
@keyframes steen-fold-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
}

/* Services dropdown (desktop and phone): an icon tile before each service
   (from its Icon field) and an arrow after "All services" (inc/menus.php). */
.dropdown-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 1.875rem;
	height: 1.875rem;
	border-radius: var(--radius);
	background: var(--color-primary-soft);
	color: var(--color-primary);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-icon .bi {
	width: 1rem;
	height: 1rem;
}

.steen-menu .menu-item-all a {
	gap: 0.4rem;
	font-weight: 500;
	color: var(--color-primary);
}

.dropdown-all__arrow {
	width: 0.875rem;
	height: 0.875rem;
	transition: transform 0.2s ease;
}

.steen-menu .menu-item-all a:hover .dropdown-all__arrow {
	transform: translateX(3px);
}

/* ---------- 7b. Header style "white" (Customizer → Header and footer →
   Header style). The navy look above stays the base; these rules only apply
   while "White menu bar" is chosen (body class header-white). ---------- */

/* Top strip: deep blue with white text (15:1) and light-blue icons (6:1). */
.header-white .topbar {
	background-color: var(--color-deep);
	border-bottom-color: var(--color-deep);
	color: var(--color-white);
}

.header-white .topbar__licences,
.header-white .topbar a {
	color: var(--color-white);
}

.header-white .topbar a:hover {
	color: var(--color-white);
}

.header-white .topbar .bi {
	color: var(--color-primary-light);
}

.header-white .topbar__licences li,
.header-white .topbar__list li,
.header-white .topbar .social-links {
	border-left-color: rgba(255, 255, 255, 0.25);
}

.header-white .topbar .social-links a:hover {
	background: rgba(255, 255, 255, 0.12);
}

.header-white .topbar :focus-visible {
	outline-color: var(--color-focus-on-dark);
}

/* Menu bar: white, navy text, a thin line underneath. */
.header-white .site-header {
	background-color: var(--color-white);
	color: var(--color-navy);
	box-shadow: 0 1px 0 var(--color-border);
}

.header-white .site-header.is-scrolled {
	box-shadow: var(--shadow);
}

.header-white .site-header :focus-visible {
	outline-color: var(--color-focus);
}

.header-white .site-header .wordmark__name {
	color: var(--color-deep);
}

.header-white .site-header .wordmark__suffix {
	color: var(--color-primary);
}

.header-white .site-header a:hover .wordmark__name {
	color: var(--color-primary);
}

.header-white .menu-toggle {
	border-color: var(--color-border);
	color: var(--color-deep);
}

.header-white .menu-toggle:hover {
	background: var(--color-surface);
}

@media (min-width: 992px) {
	.header-white .steen-menu > li > a,
	.header-white .submenu-toggle {
		color: var(--color-nav-text);
	}

	.header-white .steen-menu > li > a:hover,
	.header-white .steen-menu > li.is-open > a {
		color: var(--color-primary);
	}

	.header-white .steen-menu > li > a::after {
		background: var(--color-primary);
	}
}

/* ---------- 8. Footer ---------- */

.site-footer {
	--bs-heading-color: var(--color-white);
	background-color: var(--color-navy);
	color: var(--color-on-dark);
	font-size: 0.9375rem;
}

.site-footer a {
	color: var(--color-on-dark-soft);
	text-decoration: none;
}

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

.site-footer__main {
	padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
}

.site-footer__heading {
	margin-bottom: 1.125rem;
	font-size: 1rem;
	font-weight: 700;
}

/* Brand bar: logo on the left, licence badges on the right (stacked on phones). */
.site-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
	margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
	padding-bottom: clamp(2rem, 1.5rem + 2vw, 2.75rem);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 992px) {
	.site-footer__brand {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.site-footer__logo-link {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 1rem;
	text-decoration: none;
}

.site-footer__logo {
	display: block;
	width: auto;
	height: 4.5rem;
}

.footer-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 992px) {
	.footer-badges {
		justify-content: flex-end;
	}
}

.footer-badges li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4375rem 0.875rem;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	font-size: 0.8125rem;
	line-height: 1.3;
}

.footer-badges .bi {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	color: var(--color-primary-light);
}

.footer-badges strong {
	color: var(--color-white);
	font-weight: 700;
}

.footer-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-menu li + li {
	margin-top: 0.625rem;
}

/* A small chevron before each link; it nudges right on hover. */
.footer-menu a {
	display: inline-flex;
	gap: 0.5rem;
	align-items: baseline;
}

.footer-menu__chevron {
	flex-shrink: 0;
	width: 0.6875rem;
	height: 0.6875rem;
	color: var(--color-primary-light);
	transition: transform 0.2s ease;
}

.footer-menu a:hover .footer-menu__chevron {
	transform: translateX(3px);
}

/* Small computer screens (992-1199px): narrower gaps between the footer columns,
   so "Licensed Asbestos Disposal" still fits on one line. */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.site-footer__main .row {
		--bs-gutter-x: 1.5rem;
	}
}

/* Phones: the Company menu has the full width but short links, so two columns. */
@media (max-width: 767.98px) {
	.site-footer__company .footer-menu {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.625rem 1.5rem;
	}

	.site-footer__company .footer-menu li + li {
		margin-top: 0;
	}
}

/* Licence cards, one per licence line (Contact page; the class name is from
   when the footer showed them too). */
.footer-licences {
	display: grid;
	gap: 1rem;
	margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
	padding: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	list-style: none;
}

@media (min-width: 768px) {
	.footer-licences {
		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	}
}

.footer-licences li {
	display: flex;
	gap: 0.875rem;
	align-items: flex-start;
	padding: 1rem 1.125rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, 0.04);
	font-size: 0.875rem;
	line-height: 1.5;
}

.footer-licences .bi {
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--color-primary-light);
}

.footer-licences strong {
	color: var(--color-white);
}

.footer-licences__title {
	display: block;
	margin-bottom: 0.125rem;
	font-family: var(--font-heading);
	font-size: 0.9375rem;
}

.credential-list,
.contact-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.credential-list li,
.contact-list li {
	display: flex;
	gap: 0.625rem;
	align-items: flex-start;
}

.credential-list li + li,
.contact-list li + li {
	margin-top: 0.75rem;
}

.credential-list .bi,
.contact-list .bi {
	flex-shrink: 0;
	margin-top: 0.125rem;
	color: var(--color-primary-light);
}

.social-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.site-footer .social-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	color: var(--color-white);
	font-size: 1.125rem;
	text-decoration: none;
}

.site-footer .social-links a:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
	text-decoration: none;
}

.site-footer__bottom {
	padding-block: 1.25rem;
	background: rgba(255, 255, 255, 0.04);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 0.875rem;
}

/* Leave room for the floating WhatsApp button on small screens. */
@media (max-width: 767.98px) {
	.site-footer__bottom {
		padding-bottom: 5.5rem;
	}
}

/* ---------- 9. Floating WhatsApp button ---------- */

.whatsapp-float {
	position: fixed;
	right: max(1rem, env(safe-area-inset-right));
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 1029;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--color-whatsapp);
	color: var(--color-white);
	font-size: 1.75rem;
	box-shadow: var(--shadow);
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.whatsapp-float:hover {
	background: var(--color-whatsapp-hover);
	color: var(--color-white);
	transform: scale(1.05);
}

.whatsapp-float:focus-visible {
	outline: 3px solid var(--color-navy);
	outline-offset: 3px;
}

/* Hidden while the mobile menu is open. */
.menu-open .whatsapp-float {
	display: none;
}

/* ---------- 10. Home page ---------- */

/* Shared: "All services" style link under a section */
.section__more {
	margin: 2.5rem 0 0;
	text-align: center;
}

/* CTA buttons (hero and quote band) */
.cta-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

/* Trust badges (next to quote buttons) */
.trust-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.trust-badges li {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	border-radius: 999px;
	background: rgba(var(--color-primary-rgb), 0.08);
	color: var(--color-deep);
	font-family: var(--font-nav);
	font-size: 0.875rem;
	font-weight: 500;
}

.trust-badges .bi {
	color: var(--color-primary);
}

.trust-badges--dark li {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: var(--color-white);
}

.trust-badges--dark .bi {
	color: var(--color-primary-light);
}

@media (max-width: 575.98px) {
	.cta-buttons .btn {
		width: 100%;
	}
}

/* Narrow phones: slightly smaller large buttons, so "Call +254 ..." stays on one line. */
@media (max-width: 399.98px) {
	.cta-buttons .btn-lg {
		--bs-btn-font-size: 1rem;
		--bs-btn-padding-x: 1rem;
	}

	.trust-badges li {
		font-size: 0.8125rem;
	}
}

/* Hero: two layouts. "split" (default): white, text left, photo right. */
.hero--split {
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(5.5rem, 4.5rem + 4vw, 8rem);
	background: linear-gradient(180deg, var(--color-white) 0%, var(--color-surface) 100%);
	color: var(--color-ink);
}

.hero--split .hero__title {
	margin-bottom: 1.25rem;
	font-size: var(--fs-display);
	font-weight: 700;
	line-height: var(--lh-display);
	letter-spacing: -0.015em;
	color: var(--color-deep);
}

.hero--split .hero__lead {
	max-width: 36rem;
	margin-bottom: 0;
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
	line-height: 1.75;
	color: var(--color-muted);
}

/* Slightly narrower hero buttons on wide screens, so all three fit on one line. */
@media (min-width: 1200px) {
	.hero--split .cta-buttons .btn-lg {
		--bs-btn-padding-x: 1.125rem;
	}
}

/* Small rounded label above the hero heading. */
.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	background: var(--color-primary-soft);
	color: var(--color-primary);
	font-family: var(--font-nav);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.3;
}

/* Licence box under the hero buttons (split layout): one row of three equal
   tiles with thin dividers, like a stats bar, the icon above centred text with
   lines of even length; stacked with lines between them on phones. */
.hero__trust {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 1.75rem 0 0;
	padding: 0.25rem 1.25rem;
	list-style: none;
	background: var(--color-white);
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
}

.hero__trust li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding-block: 0.75rem;
	font-family: var(--font-nav);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-deep);
}

.hero__trust li + li {
	border-top: 1px solid var(--color-border-soft);
}

.hero__trust .bi {
	flex-shrink: 0;
	height: 1.4em;
	color: var(--color-primary);
}

@media (min-width: 576px) {
	.hero__trust {
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		grid-template-columns: none;
		padding: 0.25rem 0;
	}

	.hero__trust li {
		flex-direction: column;
		justify-content: flex-start;
		gap: 0.375rem;
		padding: 0.875rem 1rem;
		text-align: center;
		text-wrap: balance;
	}

	.hero__trust li + li {
		border-top: 0;
		border-left: 1px solid var(--color-border);
	}
}

/* Photo with rounded corners, a white edge, a deep shadow and a small card on
   its corner, over a deep-blue panel with a faint dot pattern that is shifted
   down and to the right. No red here: red stays away from the quote buttons.
   Works with upright and landscape photos: the photo is cropped to the frame. */
.hero__visual {
	position: relative;
	isolation: isolate;
	margin: 0;
	padding: 0 0.75rem 0.75rem 0;
}

.hero__visual::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0.75rem 0 0 0.75rem;
	border-radius: var(--radius-xl);
	background-color: var(--color-deep);
	background-image: radial-gradient(rgba(var(--color-primary-light-rgb), 0.35) 1.2px, transparent 1.3px);
	background-size: 14px 14px;
}

@media (min-width: 992px) {
	.hero__visual {
		padding: 0 1.25rem 1.25rem 0;
	}

	.hero__visual::before {
		inset: 1.25rem 0 0 1.25rem;
	}
}

.hero__picture {
	display: block;
}

.hero__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center 35%;
	border: 4px solid var(--color-white);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-hero-photo);
}

@media (min-width: 992px) {
	.hero__photo {
		border-width: 6px;
	}
}

@media (min-width: 576px) and (max-width: 991.98px) {
	.hero__photo {
		aspect-ratio: 3 / 2;
	}
}

@media (min-width: 992px) {
	.hero__photo {
		aspect-ratio: 5 / 6;
	}
}

.hero__badge {
	position: absolute;
	bottom: 1.75rem;
	left: 1rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	max-width: min(20rem, calc(100% - 2rem));
	padding: 0.875rem 1.125rem;
	background: var(--color-white);
	border-left: 4px solid var(--color-primary);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	font-family: var(--font-nav);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--color-deep);
}

@media (max-width: 575.98px) {
	.hero__badge {
		gap: 0.625rem;
		padding: 0.625rem 0.875rem;
		font-size: 0.8125rem;
	}

	.hero__badge-icon {
		width: 2rem;
		height: 2rem;
		font-size: 1rem;
	}
}

@media (min-width: 992px) {
	.hero__badge {
		bottom: 2.5rem;
		left: -1.5rem;
	}
}

.hero__badge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.625rem;
	background: var(--color-primary-soft);
	color: var(--color-primary);
	font-size: 1.25rem;
}

/* Hero "photo" layout: the photo behind the text, darkened. */
.hero--photo {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--color-navy);
	color: var(--color-on-dark);
}

.hero__image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Darken the photo so white text stays readable (stronger on the text side). */
.hero--has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(10, 22, 56, 0.82);
}

@media (min-width: 992px) {
	.hero--has-image::before {
		background: linear-gradient(90deg, rgba(10, 22, 56, 0.92) 0%, rgba(10, 22, 56, 0.8) 50%, rgba(10, 22, 56, 0.45) 100%);
	}
}

.hero__inner {
	padding-block: clamp(3.5rem, 2rem + 6vw, 7rem);
}

.hero__content {
	max-width: 52rem;
}

.hero--photo .hero__title {
	margin-bottom: 1rem;
	font-size: clamp(1.875rem, 1.2rem + 2.8vw, 3rem);
	font-weight: 700;
	color: var(--color-white);
}

.hero--photo .hero__lead {
	max-width: var(--measure);
	margin-bottom: 0;
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
	color: var(--color-on-dark);
}

.hero--photo .hero__eyebrow {
	background: rgba(255, 255, 255, 0.12);
	color: var(--color-white);
}

.hero--photo .hero__eyebrow .bi {
	color: var(--color-primary-light);
}

/* Licences strip: three white cards. Under the split hero they overlap its bottom edge. */
.credentials-strip {
	padding-block: 2rem;
	background: var(--color-surface);
}

.credentials-strip--lifted {
	position: relative;
	z-index: 2;
	margin-top: -3.75rem;
	padding-block: 0;
	background: transparent;
}

.credentials-strip__list {
	display: grid;
	/* minmax(0, 1fr): the column may shrink below a long licence number, which then wraps. */
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 992px) {
	.credentials-strip__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

.credential-card > span:last-child {
	min-width: 0;
	overflow-wrap: anywhere;
}

.credential-card {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	height: 100%;
	padding: 1.25rem 1.5rem;
	background: var(--color-white);
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--color-ink);
}

.credential-card__title {
	display: block;
	margin-bottom: 0.125rem;
	font-family: var(--font-heading);
	font-size: 1.0625rem;
	line-height: 1.3;
	color: var(--color-deep);
}

.credential-card strong {
	color: var(--color-deep);
}

.credentials-strip--lifted .credential-card {
	box-shadow: var(--shadow-lg);
}

/* How it works: a timeline. Phones and tablets: a line down the left with a
   numbered circle for each step and the text beside it. Computers: the line
   runs across, the circles sit on it, and the steps hang centred below. The
   blue part of the line fills in from the start as the steps scroll into view. */
.timeline {
	--dot: 2.75rem;
	position: relative;
	display: grid;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Phones and tablets: each step draws the line from its circle down to the next one. */
.timeline > li:not(:last-child) .timeline__step::before {
	content: "";
	position: absolute;
	top: calc(var(--dot) / 2);
	bottom: -1.75rem;
	left: calc(var(--dot) / 2 - 1px);
	width: 2px;
	background: var(--color-primary);
	transform-origin: top;
	transition: transform 0.8s ease 0.3s;
}

.timeline__step.reveal:not(.is-visible)::before {
	transform: scaleY(0);
}

.timeline__step {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
}

.timeline__dot {
	position: relative;
	z-index: 1;
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: var(--dot);
	height: var(--dot);
	border-radius: 50%;
	background: var(--color-primary);
	box-shadow: 0 0 0 6px var(--color-surface);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1;
}

.section:not(.section--alt) .timeline__dot {
	box-shadow: 0 0 0 6px var(--color-white);
}

.timeline__body {
	padding-top: 0.125rem;
}

.timeline__icon {
	float: left;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.0625rem 0.5rem 0 0;
	color: var(--color-primary);
}

.timeline__label {
	margin: 0 0 0.25rem;
	font-family: var(--font-nav);
	font-size: var(--label-size);
	font-weight: 700;
	letter-spacing: var(--label-tracking);
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--color-primary);
}

.timeline__title {
	clear: left;
	margin-bottom: var(--space-title-sm);
	color: var(--color-deep);
}

.timeline__text {
	margin: 0;
	color: var(--color-muted);
}

@media (min-width: 992px) {
	.timeline {
		grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr));
		gap: 1.5rem;
	}

	.timeline > li:not(:last-child) .timeline__step::before {
		content: none;
	}

	/* One line from the first circle to the last: grey, with blue filling in
	   from the left once the steps have scrolled into view. */
	.timeline::before,
	.timeline::after {
		content: "";
		position: absolute;
		top: calc(var(--dot) / 2 - 1px);
		right: calc(50% / var(--steps, 4));
		left: calc(50% / var(--steps, 4));
		height: 2px;
		background: var(--color-line);
	}

	.timeline::after {
		background: var(--color-primary);
		transform-origin: left;
		transition: transform 1.2s ease 0.2s;
	}

	.timeline:has(.reveal:not(.is-visible))::after {
		transform: scaleX(0);
	}

	.timeline__step {
		flex-direction: column;
		align-items: center;
		gap: 0;
		height: 100%;
		padding: 0 0.75rem 1.5rem;
		border-radius: var(--radius-lg);
		text-align: center;
		transition: transform 0.25s ease;
	}

	.timeline__step:hover {
		transform: translateY(-4px);
	}

	.timeline__body {
		padding-top: 1.75rem;
	}

	.timeline__icon {
		display: block;
		float: none;
		width: 2.75rem;
		height: 2.75rem;
		margin: 0 auto 1.25rem;
	}
}

/* Cards: clickable, media, meta */
.card-steen--link {
	position: relative;
}

.card-steen--link:has(.stretched-link:focus-visible) {
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
}

.card-steen--link .stretched-link:focus-visible {
	outline: none;
}

/* Card, step and why-us titles: Raleway Bold, like the section headings,
   with the same small gap to the text under them. */
.card-steen__title,
.timeline__title,
.why-list__title {
	margin-bottom: var(--space-title-sm);
	font-weight: 700;
}

.card-steen__title a {
	color: var(--color-deep);
	text-decoration: none;
}

.card-steen--link:hover .card-steen__title a {
	color: var(--color-primary);
}

.card-steen__text {
	color: var(--color-muted);
}

.card-steen__more {
	font-family: var(--font-nav);
	font-weight: 500;
	color: var(--color-primary);
}

/* Animation 3: the arrow after "Learn more" (and in the page numbers) nudges
   right when the card or link is hovered. */
.card-steen__more .bi,
.steen-pagination .page-numbers .bi {
	transition: transform 0.2s ease;
}

.card-steen--link:hover .card-steen__more .bi,
.steen-pagination a.next:hover .bi {
	transform: translateX(3px);
}

.steen-pagination a.prev:hover .bi {
	transform: translateX(-3px);
}

.card-steen__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* Project without a photo: a pale blue panel with a large Project Type icon
   takes the photo's place, so it lines up with the cards beside it. */
.card-steen__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 10;
	background:
		radial-gradient(circle at 30% 25%, var(--color-white), transparent 60%),
		var(--color-primary-soft);
	color: var(--color-primary);
}

.card-steen__media--empty .bi {
	width: 4rem;
	height: 4rem;
	opacity: 0.85;
	transition: transform 0.3s ease;
}

.card-steen--link:hover .card-steen__media--empty .bi {
	transform: scale(1.08);
}

/* Small label on a photo, e.g. "Latest" on the home page's wide project card. */
.card-steen__media {
	position: relative;
}

.card-steen__tag {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 1;
	padding: 0.375rem 0.875rem;
	border-radius: 999px;
	background: var(--color-navy);
	color: var(--color-white);
	font-family: var(--font-nav);
	font-size: var(--label-size);
	font-weight: 700;
	letter-spacing: var(--label-tracking);
	line-height: 1.3;
	text-transform: uppercase;
}

/* Project card with a photo: the text sits in a white caption box that
   overlaps the bottom of the photo. A short blue bar on the box's top edge
   grows on hover (instead of the line along the bottom of other cards). */
.card-steen--caption {
	display: flex;
	flex-direction: column;
	background: transparent;
	border: 0;
	box-shadow: none;
	overflow: visible;
}

.card-steen--caption:hover,
.card-steen--caption:focus-within {
	box-shadow: none;
}

.card-steen--caption::after {
	content: none;
}

.card-steen--caption .card-steen__media {
	overflow: hidden;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
}

/* Animation 4: on every clickable card, the photo zooms in a little on hover,
   clipped by its frame. */
.card-steen--link .card-steen__media {
	overflow: hidden;
}

.card-steen--link .card-steen__media img {
	transition: transform 0.5s ease;
}

.card-steen--link:hover .card-steen__media img {
	transform: scale(1.04);
}

.card-steen--caption .card-steen__body {
	flex: 1 0 auto;
	margin: -3rem 1rem 0;
	background: var(--color-white);
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	transition: box-shadow 0.25s ease;
}

.card-steen--caption:hover .card-steen__body,
.card-steen--caption:focus-within .card-steen__body {
	box-shadow: var(--shadow-lg);
}

.card-steen--caption .card-steen__body::before {
	content: "";
	position: absolute;
	top: -1px;
	left: clamp(1.5rem, 1.25rem + 1vw, 2rem);
	width: 2.5rem;
	height: 4px;
	border-radius: 0 0 4px 4px;
	background: var(--color-primary);
	transition: width 0.3s ease;
}

.card-steen--caption:hover .card-steen__body::before {
	width: 4.5rem;
}

/* Location and type of client as small chips. */
.card-steen__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-meta);
	color: var(--color-deep);
}

.card-steen__meta li {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: var(--color-surface);
}

.card-steen__meta .bi {
	color: var(--color-primary);
}

/* Wide project card: photo beside the text from tablets up. */
.card-steen--feature .card-steen__title {
	margin-bottom: var(--space-title);
}

@media (min-width: 768px) {
	.card-steen--feature {
		display: grid;
		grid-template-columns: 1.15fr 1fr;
		align-items: center;
	}

	/* The photo fills its half of the card, whatever its shape, without making the card taller. */
	.card-steen--feature .card-steen__media {
		position: relative;
		align-self: stretch;
		min-height: 22rem;
	}

	.card-steen--feature .card-steen__media--empty {
		aspect-ratio: auto;
	}

	.card-steen--feature .card-steen__media img {
		position: absolute;
		inset: 0;
		height: 100%;
		aspect-ratio: auto;
	}

	.card-steen--feature .card-steen__body {
		padding: clamp(2rem, 1rem + 2vw, 3rem);
	}
}

/* Blog: a large first card and a short list of compact cards. */
.card-steen--feature-post .card-steen__media img {
	aspect-ratio: 16 / 9;
}

.post-list {
	display: grid;
	gap: 1rem;
	height: 100%;
}

.card-steen--compact {
	display: grid;
	grid-template-columns: 6.5rem 1fr;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem;
}

.card-steen--compact .card-steen__media img {
	aspect-ratio: 1 / 1;
	border-radius: var(--radius);
}

.card-steen--compact .card-steen__body {
	padding: 0.25rem 0.5rem 0.25rem 0;
}

.card-steen--compact .card-steen__title {
	margin-bottom: 0;
}

.card-steen--compact .card-steen__date {
	margin: 0.375rem 0 0;
}

/* Category: a coloured word above the title (on the large blog card it sits
   on the photo as a small tag instead). */
.card-steen__category {
	margin-bottom: 0.375rem;
	color: var(--color-primary);
	font-family: var(--font-nav);
	font-size: var(--label-size);
	font-weight: 700;
	letter-spacing: var(--label-tracking);
	text-transform: uppercase;
}

.card-steen__date {
	margin-bottom: 0.625rem;
	font-size: var(--fs-meta);
	color: var(--color-muted);
}

.term-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
}

.term-badges li {
	padding: 0.125rem 0.625rem;
	border-radius: 999px;
	background: rgba(var(--color-primary-rgb), 0.1);
	color: var(--color-deep);
	font-family: var(--font-nav);
	font-size: var(--fs-meta);
	font-weight: 500;
}

/* Why choose us: optional photo with a small card, and the points as a numbered list. */
.why-visual {
	position: relative;
	isolation: isolate;
	margin: 0;
}

/* Small dot grid peeking out behind the photo's top-left corner (decoration only). */
.why-visual__dots {
	position: absolute;
	z-index: -1;
	top: -1rem;
	left: -0.75rem;
	width: 8.5rem;
	height: 8.5rem;
	background-image: radial-gradient(var(--decor-dot) 1.6px, transparent 2.1px);
	background-size: 1rem 1rem;
}

@media (min-width: 576px) {
	.why-visual__dots {
		top: -1.5rem;
		left: -1.5rem;
	}
}

.why-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-lg);
}

@media (min-width: 992px) {
	.why-image {
		aspect-ratio: 4 / 5;
	}
}

/* Info card on the photo's bottom-left corner: icon tile, title, short line.
   On computers it sticks out past the photo's edges. */
.why-visual__badge {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	display: flex;
	align-items: center;
	gap: 0.875rem;
	max-width: min(21rem, calc(100% - 2rem));
	padding: 1rem 1.25rem 1rem 1rem;
	background: var(--color-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	line-height: 1.35;
}

@media (min-width: 992px) {
	.why-visual__badge {
		bottom: -1.5rem;
		left: -1.5rem;
	}
}

.why-visual__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 0.875rem;
	background: var(--color-primary-soft);
	color: var(--color-primary);
	font-size: 1.5rem;
}

.why-visual__title {
	display: block;
	font-family: var(--font-nav);
	font-weight: 700;
	color: var(--color-deep);
}

.why-visual__note {
	display: block;
	margin-top: 0.125rem;
	font-size: 0.875rem;
	color: var(--color-muted);
}

@media (max-width: 575.98px) {
	.why-visual__badge {
		gap: 0.625rem;
		padding: 0.75rem 1rem 0.75rem 0.75rem;
		font-size: 0.9375rem;
	}

	.why-visual__icon {
		width: 2.5rem;
		height: 2.5rem;
		font-size: 1.125rem;
	}
}

.why-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--color-border);
}

/* Without a photo: two columns on wide screens. */
@media (min-width: 768px) {
	.why-list--wide {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(2rem, 1rem + 3vw, 4rem);
	}
}

.why-item {
	display: flex;
	align-items: flex-start;
	gap: 1.125rem;
	padding-block: 1.25rem;
	border-bottom: 1px solid var(--color-border);
}

.why-item__number {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--color-primary-soft);
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.why-item:hover .why-item__number {
	background: var(--color-primary);
	color: var(--color-white);
}

.why-list__title {
	margin: 0.25rem 0 var(--space-title-sm);
	color: var(--color-deep);
}

.why-list__text {
	margin: 0;
	font-size: 1rem;
	color: var(--color-muted);
}

/* Testimonials: a grid on wide screens, one swipeable row on phones. */
.testimonial-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: 1.5rem;
}

@media (max-width: 767.98px) {
	.testimonial-row {
		display: flex;
		gap: 1rem;
		margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
		padding: 0.25rem calc(var(--bs-gutter-x, 1.5rem) * 0.5) 1rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
	}

	.testimonial-row__item {
		flex: 0 0 86%;
		scroll-snap-align: start;
	}
}

.testimonial-row:focus-visible {
	outline-offset: 4px;
	border-radius: var(--radius);
}

.testimonial {
	position: relative;
	margin: 0;
	border-left: 4px solid var(--color-primary);
}

.testimonial .card-steen__body {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* A large, faint quote mark above the quote (decoration only). It takes its
   own space, so it never sits on top of the first line of text. */
.testimonial__mark {
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: 0.75rem;
	color: var(--color-primary-soft);
	pointer-events: none;
}

.testimonial__quote {
	position: relative;
	flex-grow: 1;
	margin: 0 0 1.5rem;
	font-size: 1.0625rem;
	line-height: 1.75;
}

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

/* Name and role under a thin line, with the initials in a navy circle. */
.testimonial__by {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--color-border-soft);
}

.testimonial__initials,
.team-card__initials {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	background: var(--color-navy);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
}

.testimonial__initials {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	font-size: 1rem;
}

.testimonial__by strong {
	display: block;
	font-family: var(--font-heading);
	font-size: 1.0625rem;
	color: var(--color-deep);
}

.testimonial__who > span {
	font-size: var(--fs-meta);
	font-weight: 700;
	color: var(--color-primary);
}

/* Team: a centred card with a round photo inside a soft blue ring (or the
   person's initials), the name, the job title as a small capital label, the
   short bio, and small round LinkedIn and email icons when filled in. */
.team-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 22rem;
	margin-inline: auto;
	padding: 2rem 1.5rem 1.75rem;
	text-align: center;
}

.team-card__photo {
	width: 9rem;
	height: 9rem;
	margin-bottom: 1.25rem;
	padding: 0.375rem;
	border-radius: 50%;
	background: var(--color-white);
	box-shadow: 0 0 0 6px var(--color-primary-soft), 0 0 0 7px rgba(var(--color-primary-rgb), 0.18);
	transition: box-shadow 0.3s ease;
}

.team-card:hover .team-card__photo {
	box-shadow: 0 0 0 6px var(--color-primary-soft), 0 0 0 7px rgba(var(--color-primary-rgb), 0.45);
}

.team-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 25%;
}

.team-card__initials {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	font-size: 2.25rem;
}

.team-card__name {
	margin-bottom: var(--space-title-sm);
	color: var(--color-deep);
}

/* Cards side by side: room for a two-line name on every card, with the name
   at the bottom of that room, so roles and bios line up across the row. */
@media (min-width: 576px) {
	.team-card__name {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		min-height: 2.4em;
		min-height: 2lh;
	}
}

.team-card__role {
	margin-bottom: 0.875rem;
	font-family: var(--font-nav);
	font-size: var(--label-size);
	font-weight: 700;
	letter-spacing: var(--label-tracking);
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--color-primary);
}

.team-card__bio {
	font-size: 0.9375rem;
	color: var(--color-muted);
}

.team-card__bio p:last-child {
	margin-bottom: 0;
}

.team-card__social {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin: auto 0 0;
	padding: 1.25rem 0 0;
	list-style: none;
}

.team-card__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--color-primary-soft);
	color: var(--color-primary);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.team-card__social a:hover,
.team-card__social a:focus-visible {
	background: var(--color-primary);
	color: var(--color-white);
}

.team-card__social svg {
	width: 1rem;
	height: 1rem;
}

/* Quote band: a rounded navy-to-deep-blue panel on white (so it stands apart
   from the navy footer). Text on the left, the three buttons stacked on the
   right; a large, very faint shield in the corner. */
.quote-band__panel {
	position: relative;
	overflow: hidden;
	padding: clamp(2rem, 1rem + 4vw, 4rem) clamp(1.25rem, 0.5rem + 4vw, 4rem);
	border-radius: var(--radius-xl);
	background-image: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy) 35%, var(--color-deep) 100%);
	box-shadow: var(--shadow-lg);
}

.quote-band__panel > .row {
	position: relative;
}

.quote-band__mark {
	position: absolute;
	right: -2.5rem;
	bottom: -3.5rem;
	color: var(--color-white);
	opacity: 0.05;
	pointer-events: none;
}

.quote-band__mark .bi {
	width: 16rem;
	height: 16rem;
}

.quote-band__intro {
	max-width: 36rem;
	margin-bottom: 0;
	font-size: 1.0625rem;
	color: var(--color-on-dark);
}

.quote-band .trust-badges {
	margin-top: 1.5rem;
}

/* The button stack: Request a Quote full width, then Call and WhatsApp at equal
   width side by side (one above the other when there is no room). */
.cta-buttons--stack {
	display: grid;
	gap: 0.75rem;
	margin-top: 0;
}

.cta-buttons--stack .btn {
	width: 100%;
}

.cta-buttons__pair {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
	gap: 0.75rem;
}

.cta-buttons--stack .btn-outline-light {
	--bs-btn-border-color: rgba(255, 255, 255, 0.55);
	--bs-btn-padding-x: 1rem;
	border-width: 1px;
}

/* WhatsApp keeps its green as a small circle behind the icon. */
.btn__icon-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	margin-block: -0.25rem;
	border-radius: 50%;
	background: var(--color-whatsapp);
	color: var(--color-white);
}

.btn__icon-circle .bi {
	width: 0.9375rem;
	height: 0.9375rem;
}

@media (min-width: 992px) {
	.quote-band .cta-buttons--stack {
		max-width: 35rem;
		margin-left: auto;
	}
}

/* ---------- 11. Inner pages ---------- */

/* Page title band. With a photo (layout A): solid navy on the left with the
   text, the photo in full colour on the right, and a slanted blue edge
   between them (section 14). On phones and tablets the photo sits on top and
   the slanted edge leads into the navy text area. The text always sits on
   solid navy, so it passes AA whatever the photo. Without any photo: plain
   navy with soft blue shapes on the right. */
.page-header {
	position: relative;
	overflow: hidden;
	padding-block: clamp(2.75rem, 1.75rem + 4vw, 5.25rem);
	background-color: var(--color-navy);
	background-image: linear-gradient(100deg, var(--color-navy) 35%, var(--color-deep));
	color: var(--color-on-dark);
}

/* --band-half: half the width of the content (the container minus its
   padding), so the text starts on the content edge.
   --band-text: how wide the text may run. The navy edge starts 2.5rem after
   it (at 50% + 1.5rem, measured at the foot of the slant, where the navy is
   narrowest), so the text never touches the slanted edge at any width.
   --band-photo-h: the photo's height on phones and tablets. */
.page-header--photo {
	--band-half: 999rem;
	--band-text: 100%;
	--band-photo-h: clamp(13rem, 45vw, 20rem);
	background: var(--color-navy);
}

.page-header__photo {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: -3;
	width: 100%;
	height: var(--band-photo-h);
	object-fit: cover;
	object-position: 50% 45%;
}

/* Phones and tablets: the text starts below the photo and the slanted edge. */
@media (max-width: 991.98px) {
	.page-header--photo {
		padding-top: calc(var(--band-photo-h) + 2.5rem);
	}
}

@media (min-width: 992px) {
	.page-header--photo {
		--band-half: 29.25rem;
		--band-text: calc(var(--band-half) - 1rem);
		display: flex;
		align-items: center;
		min-height: 22rem;
	}

	.page-header--photo > .container {
		width: 100%;
	}

	/* The photo starts under the navy, so no gap shows along the slant. */
	.page-header__photo {
		bottom: 0;
		left: auto;
		width: calc(50% + 4rem);
		height: 100%;
	}
}

@media (min-width: 1200px) {
	.page-header--photo {
		--band-half: 34.875rem;
	}
}

@media (min-width: 1400px) {
	.page-header--photo {
		--band-half: 40.5rem;
	}
}

/* Doubled class: these must beat the general text widths below. */
.page-header.page-header--photo > .container > * {
	max-width: min(var(--band-text), 46rem);
}

.page-header.page-header--photo > .container > .page-header__intro {
	max-width: min(var(--band-text), var(--measure));
}

.page-header > .container {
	position: relative;
}

/* The text column stays clear of the slanted shapes on the right. */
.page-header > .container > * {
	max-width: 46rem;
}

.page-header > .container > .page-header__intro {
	max-width: var(--measure);
}

/* Page title: big and white. ::before/::after stay free (the developer-mode
   DEMO label uses ::after on titles). */
.page-header__eyebrow {
	display: flex;
	margin: 0 0 var(--space-title);
	color: var(--color-primary-pale);
}

.page-header__title {
	margin-bottom: var(--space-title);
	font-size: var(--fs-display);
	line-height: var(--lh-display);
	color: var(--color-white);
	overflow-wrap: break-word;
}

.page-header .trust-badges {
	margin-top: 1.25rem;
}

.page-header__intro {
	margin: 1rem 0 0;
	color: var(--color-on-dark);
}

.page-header .term-badges {
	margin: 1rem 0 0;
}

.page-header .term-badges li {
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: var(--color-white);
}

.page-header .post-meta {
	color: var(--color-on-dark-soft);
}

.page-header .search-form__label {
	color: var(--color-white);
}

.page-header a:focus-visible {
	outline-color: var(--color-focus-on-dark);
}

.term-badges a {
	color: inherit;
	text-decoration: none;
}

.term-badges a:hover {
	text-decoration: underline;
}

/* Breadcrumbs under the title: white links, the current page in pale blue. */
.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-nav);
	font-size: 0.9375rem;
	color: var(--color-on-dark);
}

.breadcrumbs li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.breadcrumbs li + li::before {
	content: "\203A"; /* the > separator */
	font-size: 1.125rem;
	line-height: 1;
	color: var(--color-on-dark-soft);
}

.breadcrumbs a {
	color: var(--color-white);
	text-decoration: none;
}

.breadcrumbs a:hover {
	color: var(--color-primary-pale);
	text-decoration: underline;
}

.breadcrumbs [aria-current="page"] {
	font-weight: 500;
	color: var(--color-primary-pale);
}

/* Main text from the block editor */
.entry__media {
	margin: 0 0 2rem;
}

.entry__media img,
.entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
}

.entry-content > * + h2,
.entry-content > * + h3 {
	margin-top: 2rem;
}

/* Headings inside the text are one step smaller than page-level headings
   (panel size for h2, card size for h3). */
.entry-content h2 {
	margin-bottom: var(--space-title);
	font-size: var(--fs-panel);
}

.entry-content h3 {
	margin-bottom: var(--space-title-sm);
	font-size: var(--fs-card);
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.25rem;
}

.entry-content li::marker {
	color: var(--color-primary);
}

.entry-content ol > li::marker {
	font-family: var(--font-heading);
	font-weight: 700;
}

/* Quotes and pull quotes: a blue bar on a light background */
.entry-content blockquote,
.entry-content .wp-block-quote {
	margin: 2rem 0;
	padding: 1.25rem 1.5rem;
	background: var(--color-surface);
	border-left: 4px solid var(--color-primary);
	border-radius: 0 var(--radius) var(--radius) 0;
	color: var(--color-deep);
}

.entry-content blockquote > :last-child {
	margin-bottom: 0;
}

.entry-content blockquote cite {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.875rem;
	font-style: normal;
	color: var(--color-muted);
}

.entry-content li + li {
	margin-top: 0.375rem;
}

/* Galleries: neat grid, rounded photos */
.entry-content .wp-block-gallery {
	margin-block: 2rem;
}

.entry-content .wp-block-gallery img {
	border-radius: var(--radius);
}

.entry-content .wp-block-gallery a:focus-visible {
	outline-offset: 3px;
}

/* Side panel (service and project pages): a white card with a blue top edge. */
.side-panel {
	padding: 1.75rem 1.5rem 1.5rem;
	background: var(--color-white);
	border: 1px solid var(--color-border-soft);
	border-top: 4px solid var(--color-primary);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

.side-panel > h2 {
	margin-bottom: var(--space-title-sm);
	color: var(--color-deep);
}

@media (min-width: 992px) {
	.side-panel {
		position: sticky;
		top: calc(5rem + 1.5rem + var(--wp-admin--admin-bar--height, 0px));
	}
}

.side-actions {
	display: grid;
	gap: 0.75rem;
}

.side-panel h2 + .side-actions,
.highlights + .side-actions,
.project-details + .side-actions {
	margin-top: 1.5rem;
}

.side-actions .trust-badges {
	margin-top: 0.25rem;
}

/* Highlights (ticked list) */
.highlights {
	margin: 0;
	padding: 0;
	list-style: none;
}

.highlights li {
	display: flex;
	gap: 0.625rem;
	align-items: flex-start;
}

.highlights li + li {
	margin-top: 0.75rem;
}

.highlights .bi {
	flex-shrink: 0;
	margin-top: 0.125rem;
	color: var(--color-primary);
}

/* Project details */
.project-details {
	margin: 0;
}

.project-details > div + div {
	margin-top: 0.875rem;
}

.project-details dt {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	font-family: var(--font-nav);
	font-size: var(--label-size);
	font-weight: 500;
	letter-spacing: var(--label-tracking);
	text-transform: uppercase;
	color: var(--color-muted);
}

.project-details dt .bi {
	color: var(--color-primary);
}

.project-details dd {
	margin: 0.125rem 0 0;
}

/* Project filter */
.project-filter ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.project-filter__link {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.5rem 1.125rem;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	background: var(--color-white);
	color: var(--color-deep);
	font-family: var(--font-nav);
	font-weight: 500;
	text-decoration: none;
}

.project-filter__link:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.project-filter__link[aria-current] {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

[data-project-grid] > [hidden] {
	display: none !important;
}

/* ---------- 12. Pages, blog, search, 404, contact ---------- */

/* Readable column for pages, posts and search (about 70 characters) */
.entry--narrow {
	max-width: 48rem;
	margin-inline: auto;
}

.post-meta {
	margin: 0.75rem 0 0;
	font-size: var(--fs-meta);
	color: var(--color-muted);
}

.entry-footer {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--color-border);
	font-size: 0.9375rem;
}

.entry-footer p {
	margin-bottom: 0.5rem;
}

.entry-footer__label {
	font-family: var(--font-nav);
	font-weight: 500;
	color: var(--color-deep);
}

/* Previous / next article */
.post-navigation {
	margin-top: 2.5rem;
}

.post-navigation .nav-links {
	display: grid;
	gap: 1rem;
}

@media (min-width: 768px) {
	.post-navigation .nav-links {
		grid-template-columns: 1fr 1fr;
	}

	.post-navigation .nav-next {
		grid-column: 2;
		text-align: right;
	}
}

.post-navigation a {
	display: block;
	height: 100%;
	padding: 1.125rem 1.375rem;
	background: var(--color-white);
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
	color: var(--color-deep);
	font-family: var(--font-heading);
	font-weight: 700;
	text-decoration: none;
}

.post-navigation a:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	transform: translateY(-2px);
}

.post-navigation__label {
	display: block;
	margin-bottom: 0.25rem;
	font-family: var(--font-nav);
	font-size: var(--label-size);
	font-weight: 500;
	letter-spacing: var(--label-tracking);
	color: var(--color-muted);
	text-transform: uppercase;
}

/* Page numbers */
.steen-pagination {
	margin-top: 3rem;
}

.steen-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.steen-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.75rem;
	background: var(--color-white);
	border: 1px solid var(--color-border-soft);
	border-radius: 999px;
	box-shadow: var(--shadow-soft);
	color: var(--color-deep);
	font-family: var(--font-nav);
	font-weight: 500;
	text-decoration: none;
}

.steen-pagination a.page-numbers:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.steen-pagination .page-numbers.current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

.steen-pagination .page-numbers.dots {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

/* Search form */
.search-form {
	margin-top: 1.25rem;
	max-width: 36rem;
}

.search-form__label {
	display: block;
	margin-bottom: 0.375rem;
	font-family: var(--font-nav);
	font-weight: 500;
	color: var(--color-deep);
}

.search-form__row {
	display: flex;
	gap: 0.5rem;
}

.search-form .form-control {
	min-height: 2.75rem;
	border-color: var(--color-muted);
}

@media (max-width: 399.98px) {
	.search-form__row {
		flex-direction: column;
	}
}

/* Search results */
.search-results {
	display: grid;
	gap: 1rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.search-result__kind {
	margin-bottom: 0.375rem;
	font-family: var(--font-nav);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-primary);
}

/* Helpful links (404 and empty search) */
.helpful-links {
	display: grid;
	gap: 0.5rem;
	margin: 2rem 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 576px) {
	.helpful-links {
		grid-template-columns: 1fr 1fr;
	}
}

.helpful-links a {
	display: flex;
	gap: 0.625rem;
	align-items: center;
	min-height: 3.25rem;
	padding: 0.75rem 1.125rem;
	background: var(--color-white);
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	color: var(--color-deep);
	font-family: var(--font-nav);
	font-weight: 500;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.helpful-links a:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.helpful-links .bi {
	color: var(--color-primary);
}

/* Contact page: the form in a white card with a blue top edge (like the
   service side panel); the details as a list with icon tiles. */
.contact-card {
	padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
	background: var(--color-white);
	border: 1px solid var(--color-border-soft);
	border-top: 4px solid var(--color-primary);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

.contact-card__soon {
	margin-top: 1rem;
}

.contact-card__soon .cta-buttons {
	margin-top: 1rem;
}

.contact-card__reply {
	margin: 1.5rem 0 0;
	font-weight: 700;
	color: var(--color-deep);
}

.contact-card__reply .bi {
	color: var(--color-primary);
}

/* Contact details panel: a white card; each row has an icon tile, a small
   label (Address, Phone, ...) and the value. Phone, WhatsApp and email rows
   are one big link each: no underline, the value turns blue on hover. */
.contact-panel {
	padding: clamp(1.25rem, 1rem + 1.25vw, 2rem);
	background: var(--color-white);
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
}

/* Under the details: the licence cards on a navy panel. Shown on phones too:
   the footer only has the short badges, not the full lines. */
.contact-licences {
	margin-top: 1.5rem;
	padding: clamp(1rem, 0.75rem + 1vw, 1.5rem);
	border-radius: var(--radius-lg);
	background-image: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy) 40%, var(--color-deep) 100%);
	box-shadow: var(--shadow);
	overflow: hidden;
}

.contact-licences .contact-licences__list {
	grid-template-columns: 1fr;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.contact-panel__title {
	margin-bottom: var(--space-title);
}

.contact-list--labelled li + li {
	margin-top: 0;
	border-top: 1px solid var(--color-border-soft);
}

.contact-list--labelled li > a,
.contact-list--labelled li > div {
	display: flex;
	flex: 1;
	gap: 1rem;
	align-items: center;
	padding-block: 0.875rem;
	color: var(--color-ink);
	text-decoration: none;
}

.contact-list--labelled .contact-list__icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 0.75rem;
	background: var(--color-primary-soft);
	color: var(--color-primary);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.contact-list--labelled .contact-list__icon .bi {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	color: inherit;
}

.contact-list__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.contact-list__label {
	font-family: var(--font-nav);
	font-size: var(--label-size);
	font-weight: 500;
	letter-spacing: var(--label-tracking);
	text-transform: uppercase;
	color: var(--color-muted);
}

.contact-list__value {
	font-weight: 500;
	line-height: 1.45;
	overflow-wrap: anywhere;
	transition: color 0.2s ease;
}

.contact-list--labelled a:hover .contact-list__value {
	color: var(--color-primary);
}

.contact-list--labelled a:hover .contact-list__icon {
	background: var(--color-primary);
	color: var(--color-white);
}

.contact-map {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--color-border-soft);
}

.contact-map__link a {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	font-family: var(--font-nav);
	font-weight: 500;
	color: var(--color-primary);
	text-decoration: none;
}

.contact-map__link a:hover {
	color: var(--color-deep);
}

.contact-map__link:first-child {
	margin-top: 0;
}

.contact-map__link .bi {
	transition: transform 0.2s ease;
}

.contact-map__link a:hover .bi {
	transform: translateX(3px);
}

.contact-map__frame {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	min-height: 16rem;
	padding: 1.5rem;
	background: var(--color-surface);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-lg);
	text-align: center;
}

.contact-map__frame.is-loaded {
	padding: 0;
	border: 0;
	overflow: hidden;
}

.contact-map__frame iframe {
	display: block;
	width: 100%;
	height: 22rem;
	border: 0;
}

.contact-map__note {
	margin: 0;
	font-size: 0.875rem;
	color: var(--color-muted);
}

.contact-map__link {
	margin: 0.75rem 0 0;
}

/* Comments */
.comments {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--color-border);
}

.comment-list,
.comment-list .children {
	list-style: none;
	padding-left: 0;
}

.comment-list .children {
	margin-left: 1.5rem;
}

.comment-body {
	margin-bottom: 1.5rem;
}

.comment-form label {
	display: block;
	font-family: var(--font-nav);
	font-weight: 500;
	color: var(--color-deep);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	display: block;
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--color-muted);
	border-radius: var(--radius);
}

/* Contact Form 7 fields never wider than their box (full form styling comes in M6). */
.contact-card .wpcf7 label,
.contact-card .wpcf7-form-control-wrap {
	display: block;
}

.contact-card .wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.contact-card .wpcf7 select,
.contact-card .wpcf7 textarea {
	display: block;
	width: 100%;
	max-width: 100%;
}

/* Legal page template (privacy policy, terms): a "Last updated" pill in the
   title band; a contents list on the left that stays in view on computers;
   numbered section headings. One column below 992 px, contents list first. */
.legal-updated {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 1.25rem 0 0;
	padding: 0.375rem 0.875rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	font-family: var(--font-nav);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-white);
}

.legal-updated svg {
	color: var(--color-primary-light);
}

.legal {
	max-width: 48rem;
	margin-inline: auto;
}

.legal__toc {
	margin-bottom: 2.5rem;
	padding: 1.25rem 1.25rem 1rem;
	border: 1px solid var(--color-border-soft);
	border-left: 3px solid var(--color-primary);
	border-radius: var(--radius-lg);
	background: var(--color-surface);
}

.legal__toc-title {
	margin-bottom: 0.625rem;
	font-family: var(--font-nav);
	font-size: var(--label-size);
	font-weight: 700;
	letter-spacing: var(--label-tracking);
	text-transform: uppercase;
	color: var(--color-deep);
}

.legal__toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: legal-toc;
}

.legal__toc li {
	counter-increment: legal-toc;
}

.legal__toc a {
	display: flex;
	gap: 0.5rem;
	padding: 0.375rem 0.5rem;
	border-radius: var(--radius);
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--color-ink);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.legal__toc a::before {
	content: counter(legal-toc) ".";
	min-width: 1.5rem;
	font-weight: 700;
	color: var(--color-primary);
}

.legal__toc a:hover,
.legal__toc a[aria-current="location"] {
	background: var(--color-primary-soft);
	color: var(--color-deep);
}

.legal__toc a[aria-current="location"] {
	font-weight: 500;
}

.legal__content {
	counter-reset: legal-section;
}

/* Numbered headings: "1." in Steen blue before each Heading 2. */
.legal__content h2 {
	display: flex;
	gap: 0.625rem;
	margin-top: 2.5rem;
	font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
	color: var(--color-deep);
	counter-increment: legal-section;
	scroll-margin-top: calc(5rem + 1.5rem + var(--wp-admin--admin-bar--height, 0px));
}

.legal__content h2::before {
	content: counter(legal-section) ".";
	flex-shrink: 0;
	color: var(--color-primary);
}

.legal__content > h2:first-child {
	margin-top: 0;
}

@media (min-width: 992px) {
	.legal--has-toc {
		display: grid;
		grid-template-columns: 17rem minmax(0, 1fr);
		gap: 3.5rem;
		align-items: start;
		max-width: none;
	}

	.legal__toc {
		position: sticky;
		top: calc(5rem + 1.5rem + var(--wp-admin--admin-bar--height, 0px));
		max-height: calc(100vh - 8rem);
		margin-bottom: 0;
		overflow-y: auto;
	}

	.legal__body {
		max-width: 48rem;
	}
}

@media print {
	.legal__toc {
		display: none;
	}
}

/* ---------- 13. Quote form (Contact Form 7 "Quote request") ---------- */

.contact-card .wpcf7-form {
	margin-top: 1.25rem;
}

.qf-field {
	margin-bottom: 1.25rem;
}

/* Contact Form 7 wraps each field's contents in a <p>. */
.qf-field p {
	margin: 0;
}

.qf-field label {
	display: block;
	margin-bottom: 0.375rem;
	font-family: var(--font-nav);
	font-weight: 500;
	color: var(--color-deep);
}

.qf-req {
	color: var(--color-accent);
}

.qf-hint {
	display: block;
	margin-top: 0.125rem;
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--color-muted);
}

.contact-card .wpcf7 input[type="text"],
.contact-card .wpcf7 input[type="tel"],
.contact-card .wpcf7 input[type="email"],
.contact-card .wpcf7 select,
.contact-card .wpcf7 textarea {
	min-height: 2.75rem;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--color-muted);
	border-radius: var(--radius);
	background: var(--color-white);
	color: var(--color-ink);
	font-size: 1rem; /* 16px: stops phones zooming in when a field is tapped */
	line-height: 1.4;
}

.contact-card .wpcf7 textarea {
	min-height: 7rem;
	resize: vertical;
}

/* Focus: the soft blue ring for every form field (section 3); the border rule
   is repeated here because the field rules above are more specific. */
.contact-card .wpcf7 :is(input, select, textarea):focus {
	border-color: var(--color-primary);
}

/* A field with a problem: red border and a message under it (never colour alone). */
.contact-card .wpcf7 .wpcf7-not-valid {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 1px var(--color-accent);
}

.contact-card .wpcf7 .wpcf7-not-valid:focus {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 1px var(--color-accent), 0 0 0 5px rgba(var(--color-accent-rgb), 0.16);
}

.wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.375rem;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--color-accent-hover);
}

/* Small icons in form messages: the theme's own SVG files used as a mask,
   painted in the text colour (no icon font). */
.wpcf7-not-valid-tip::before,
.contact-card .wpcf7 form .wpcf7-response-output::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: var(--qf-icon) center / contain no-repeat;
	mask: var(--qf-icon) center / contain no-repeat;
}

.wpcf7-not-valid-tip::before {
	--qf-icon: url("../vendor/bootstrap-icons/icons/exclamation-circle-fill.svg");
	margin-right: 0.375rem;
	vertical-align: -0.125em;
}

/* Consent box */
.qf-consent .wpcf7-list-item {
	display: block;
	margin: 0;
}

.contact-card .wpcf7 .qf-consent label {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	display: flex;
	gap: 0.625rem;
	align-items: flex-start;
	font-size: 0.9375rem;
	color: var(--color-ink);
	cursor: pointer;
}

.qf-consent input[type="checkbox"] {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.125rem;
	accent-color: var(--color-primary);
}

.qf-consent a {
	color: var(--color-primary);
}

/* Spam trap: hidden from people and screen readers, filled in only by robots. */
.qf-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Send button and the sending spinner */
.qf-submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.qf-submit .wpcf7-submit:disabled {
	opacity: 0.75;
	cursor: progress;
}

.qf-submit .wpcf7-spinner {
	margin: 0;
}

.qf-submit > p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	min-width: 0;
}

@media (max-width: 575.98px) {
	.qf-submit > p {
		flex: 1 1 100%;
	}

	.qf-submit .wpcf7-submit {
		width: 100%;
		white-space: normal;
	}
}

@media (max-width: 399.98px) {
	.qf-submit .btn-lg {
		--bs-btn-font-size: 1rem;
		--bs-btn-padding-x: 1rem;
	}
}

/* Result message after sending: green for "received", amber for problems. */
.contact-card .wpcf7 form .wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: 0.875rem 1rem 0.875rem 2.75rem;
	position: relative;
	border: 0;
	border-left: 4px solid var(--color-warning);
	border-radius: var(--radius);
	background: var(--color-warning-soft);
	color: var(--color-warning-ink);
	font-weight: 700;
}

.contact-card .wpcf7 form .wpcf7-response-output::before {
	--qf-icon: url("../vendor/bootstrap-icons/icons/exclamation-triangle-fill.svg");
	position: absolute;
	left: 1rem;
	top: 1.125rem;
	color: var(--color-warning);
}

.contact-card .wpcf7 form.sent .wpcf7-response-output {
	border-left-color: var(--color-success);
	background: var(--color-success-soft);
	color: var(--color-success-ink);
}

.contact-card .wpcf7 form.sent .wpcf7-response-output::before {
	--qf-icon: url("../vendor/bootstrap-icons/icons/check-circle-fill.svg");
	color: var(--color-success);
}

.contact-card .wpcf7 form.init .wpcf7-response-output,
.contact-card .wpcf7 form.resetting .wpcf7-response-output,
.contact-card .wpcf7 form.submitting .wpcf7-response-output {
	display: none;
}

.contact-card__photos {
	margin: 1.25rem 0 0;
	font-size: 0.9375rem;
}

.contact-card__photos .bi {
	color: var(--color-whatsapp);
}

/* Intro text above the Contact page columns: left-aligned, readable width. */
.contact-intro {
	max-width: var(--measure);
}

/* ---------- 14. Background decorations ---------- */

/* Soft blue dot grids, rings, curved lines and glows behind the hero, some
   home sections, the inner page title band, the quote band, the Contact page
   and the footer (steen_decor() prints them). Drawn with CSS: nothing to
   download. They sit behind the content (z-index -1 inside a parent that
   starts its own layer), so they never cover text or catch clicks. */
.has-decor {
	position: relative;
	isolation: isolate;
}

/* --decor-edge is the distance from the section's edge to the edge of the
   content (the Bootstrap container minus its padding). Small accents (dot
   grids, red bars) line up with it, level with the section's label, so they
   frame the title instead of floating at the screen edge. Large soft shapes
   (rings, curves, dot waves) still run off the edge of the page. */
.decor {
	--decor-half: 999rem;
	--decor-edge: max(0.75rem, calc(50% - var(--decor-half)));
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

@media (min-width: 576px) {
	.decor { --decor-half: 16.125rem; }
}

@media (min-width: 768px) {
	.decor { --decor-half: 21.75rem; }
}

@media (min-width: 992px) {
	.decor { --decor-half: 29.25rem; }
}

@media (min-width: 1200px) {
	.decor { --decor-half: 34.875rem; }
}

@media (min-width: 1400px) {
	.decor { --decor-half: 40.5rem; }
}

.decor > span {
	position: absolute;
	display: block;
}

/* A small grid of dots. */
.decor__dots {
	width: 8.5rem;
	height: 8.5rem;
	background-image: radial-gradient(var(--decor-dot) 1.6px, transparent 2.1px);
	background-size: 1rem 1rem;
}

/* A thin ring with a second, smaller ring inside it. */
.decor__ring {
	width: 16rem;
	aspect-ratio: 1;
	border: 2px solid var(--decor-line);
	border-radius: 50%;
	background: radial-gradient(circle closest-side, transparent 77%, var(--decor-line) 77.5%, var(--decor-line) 78.5%, transparent 79%);
}

/* A large, soft round glow. */
.decor__glow {
	width: 40rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, var(--decor-glow) 0%, transparent 65%);
}

/* A curved band of small dots that fades out at both edges. */
.decor__dotwave {
	width: 34rem;
	height: 24rem;
	background-image: radial-gradient(var(--decor-dot) 1.4px, transparent 1.9px);
	background-size: 0.875rem 0.875rem;
	-webkit-mask-image: radial-gradient(circle at 0 100%, transparent 28%, #000 40%, #000 52%, transparent 70%);
	mask-image: radial-gradient(circle at 0 100%, transparent 28%, #000 40%, #000 52%, transparent 70%);
}

/* Two thin, gently curving lines (the shape is a mask; the colour is a token). */
.decor__curve {
	width: 36rem;
	aspect-ratio: 3 / 1;
	background-color: var(--decor-line);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200' fill='none' stroke='black'%3E%3Cpath stroke-width='2' d='M-10 185C120 150 170 60 290 95S470 170 610 18'/%3E%3Cpath stroke-width='1.25' d='M-10 199C130 166 180 78 300 112S480 186 610 36'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200' fill='none' stroke='black'%3E%3Cpath stroke-width='2' d='M-10 185C120 150 170 60 290 95S470 170 610 18'/%3E%3Cpath stroke-width='1.25' d='M-10 199C130 166 180 78 300 112S480 186 610 36'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Small red accents (the logo's red). Kept small and away from the red
   Request a Quote buttons, so the buttons still stand out. Never behind text. */
.decor__redbar {
	width: 0.5rem;
	background: var(--decor-accent);
	transform: skewX(-18deg);
	transform-origin: 0 100%;
}

.decor__reddot {
	width: 0.75rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--decor-accent);
}

/* Two short slanted bars, like "//". */
.decor__redbars {
	width: 1.125rem;
	height: 1.75rem;
	background: linear-gradient(90deg, var(--decor-accent) 0 0.375rem, transparent 0.375rem 0.75rem, var(--decor-accent) 0.75rem);
	transform: skewX(-18deg);
}

/* On navy (quote band, footer): light-blue tints. */
.section--dark .decor,
.site-footer .decor {
	--decor-dot: var(--decor-dot-dark);
	--decor-line: var(--decor-line-dark);
}

/* Home hero: a glow behind the text, dots peeking out at the photo's top
   right corner, a ring behind its bottom left corner, lines across the top right. */
.decor--hero .decor__glow {
	top: -14rem;
	left: -14rem;
}

.decor--hero .decor__dots {
	top: 3.5rem;
	right: max(1rem, calc(50% - 41rem));
}

.decor--hero .decor__ring {
	bottom: 3.5rem;
	left: calc(50% + 2rem);
}

.decor--hero .decor__curve {
	top: 1rem;
	right: -4rem;
	width: 40rem;
}

/* Section style A: dots at the top right, a ring half off the bottom left. */
.decor--section-a .decor__dots {
	top: var(--space-section);
	right: var(--decor-edge);
}

.decor--section-a .decor__ring {
	bottom: -7rem;
	left: -6rem;
	width: 19rem;
}

/* A red dot sitting on the ring's outer line (45 degrees up and right of its centre). */
.decor--section-a .decor__reddot {
	bottom: 8.85rem;
	left: 9.85rem;
}

/* Red "//" bars at the content's right edge, level with the section label
   (always the right, so they never sit close to the red dot at the bottom
   left of the section above). */
.decor--section-b .decor__redbars,
.decor--section-c .decor__redbars {
	top: var(--space-section);
	right: var(--decor-edge);
}

/* Section styles B and C: a small dot wave in a top corner, lines along the
   opposite bottom corner. B (centred titles): wave top left, lines bottom right.
   C (titles on the left): wave top right, lines bottom left. */
.decor--section-b .decor__dotwave,
.decor--section-c .decor__dotwave {
	top: 0;
	width: 26rem;
	height: 15rem;
}

.decor--section-b .decor__dotwave {
	left: 0;
	transform: scaleY(-1);
}

.decor--section-c .decor__dotwave {
	right: 0;
	transform: scale(-1, -1);
}

.decor--section-b .decor__curve {
	right: -3rem;
	bottom: -2.5rem;
}

.decor--section-c .decor__curve {
	bottom: -2.5rem;
	left: -3rem;
	transform: scaleX(-1);
}

/* Inner page title band (navy): two slanted shapes in Steen blue and light
   blue on the right, where the text column never reaches, and a dark dot grid.
   The blue shape is at most 35% strong, so text that runs over it on narrow
   screens still passes AA. */
.decor--page-header .decor__slant {
	top: 0;
	right: -8rem;
	bottom: 0;
	width: min(36rem, 42%);
	background: linear-gradient(180deg, rgba(var(--color-primary-rgb), 0.35), rgba(var(--color-primary-rgb), 0.14));
	transform: skewX(-18deg);
	transform-origin: 0 100%;
}

.decor--page-header .decor__stripe {
	top: 0;
	right: 21%;
	bottom: 0;
	width: 0.75rem;
	background: rgba(var(--color-primary-light-rgb), 0.3);
	transform: skewX(-18deg);
	transform-origin: 0 100%;
}

/* A red bar parallel to the blue shape, just left of it. It rises only from
   the bottom (55% of the band), away from the header's Request a Quote button. */
.decor--page-header .decor__redbar {
	right: calc(min(36rem, 42%) - 8rem + 1.25rem);
	bottom: 0;
	height: 55%;
}

.decor--page-header .decor__dots {
	top: 1.75rem;
	right: max(1.5rem, calc(50% - 38rem));
	width: 7rem;
	height: 4.5rem;
	background-image: radial-gradient(var(--decor-dot-dark) 1.6px, transparent 2.1px);
}

/* Quote band: lines along the bottom right (below the buttons), dots at the
   bottom in the middle, a ring behind the large shield. */
.decor--quote .decor__curve {
	right: -4rem;
	bottom: -4.5rem;
	width: 44rem;
}

.decor--quote .decor__dots {
	bottom: 1.25rem;
	left: 40%;
	height: 4.5rem;
}

.decor--quote .decor__ring {
	right: -6rem;
	bottom: -8rem;
	width: 22rem;
}

/* Footer: a small dot wave in the top right corner, a ring half off the
   bottom left (lines would show through the see-through licence cards). */
.decor--footer .decor__dotwave {
	top: 0;
	right: 0;
	width: 18rem;
	height: 12rem;
	transform: scale(-1, -1);
}

.decor--footer .decor__ring {
	bottom: -10rem;
	left: -8rem;
	width: 18rem;
}

/* Contact page: a glow behind the form, dots and a ring near the details. */
.decor--contact .decor__glow {
	top: -10rem;
	left: -16rem;
}

.decor--contact .decor__dots {
	right: max(1rem, calc(50% - 41rem));
	bottom: 4rem;
}

.decor--contact .decor__ring {
	top: 2rem;
	right: -8rem;
}

/* Small navy panel (licence cards on the Contact page): one ring in the corner. */
.decor--panel .decor__ring {
	top: -7rem;
	right: -7rem;
	width: 13rem;
}

/* Title band with a photo (layout A, see section 11). Desktops: the navy
   slant covers the left of the band and ends at 50% + 1.5rem at its foot,
   leaning right towards the top; a Steen blue band and a thin light-blue line
   run along its edge, over the photo; a short red bar stands on the navy at
   the foot of the edge, 1.5rem clear of the text. No dot grid here. */
.page-header--photo .decor {
	opacity: 1;
}

.page-header--photo .decor--page-header .decor__dots {
	display: none;
}

.page-header--photo .decor--page-header .decor__slant {
	top: 0;
	right: auto;
	bottom: 0;
	left: -10rem;
	width: calc(50% + 11.5rem);
	background: var(--color-navy);
	transform: skewX(-14deg);
}

.page-header--photo .decor--page-header .decor__stripe {
	top: 0;
	right: auto;
	bottom: 0;
	left: calc(50% + 1.5rem);
	width: 1rem;
	background: var(--color-primary);
	transform: skewX(-14deg);
}

.page-header--photo .decor--page-header .decor__stripe::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 1.75rem;
	width: 0.25rem;
	background: var(--color-primary-light);
}

.page-header--photo .decor--page-header .decor__redbar {
	right: auto;
	bottom: 0;
	left: calc(50% + 0.5rem);
	width: 0.45rem;
	height: 30%;
	transform: skewX(-14deg);
}

/* Phones and tablets: the navy rises from the foot of the photo with a gentle
   slant (higher on the right), a blue line along the slant, and a short red
   tick on the right, all above the text. */
@media (max-width: 991.98px) {
	.page-header--photo .decor--page-header .decor__slant {
		top: calc(var(--band-photo-h) - 1.5rem);
		left: 0;
		right: 0;
		width: auto;
		transform: none;
		clip-path: polygon(0 1.5rem, 100% 0, 100% 100%, 0 100%);
	}

	.page-header--photo .decor--page-header .decor__stripe {
		display: block;
		top: calc(var(--band-photo-h) - 2.25rem);
		bottom: auto;
		left: 0;
		right: 0;
		width: auto;
		height: 2.25rem;
		transform: none;
		clip-path: polygon(0 1.6rem, 100% 0.1rem, 100% 0.75rem, 0 2.25rem);
	}

	.page-header--photo .decor--page-header .decor__stripe::after {
		display: none;
	}

	.page-header--photo .decor--page-header .decor__redbar {
		top: calc(var(--band-photo-h) + 0.25rem);
		right: var(--decor-edge);
		bottom: auto;
		left: auto;
		width: 0.4rem;
		height: 1.5rem;
	}
}

.single-service .page-header--photo .decor--page-header .decor__redbar {
	height: 2rem;
}

/* Single service pages: always the short tick, so the bar stays well away
   from the side box's red quote button (BOND, round 10). */
.single-service .decor--page-header .decor__redbar {
	height: 2rem;
}

/* Below 1200 px the text column can reach the slanted shapes, so the red bar
   shrinks to a short tick in the band's bottom padding, clear of the text. */
@media (max-width: 1199.98px) {
	.decor--page-header .decor__redbar {
		height: 2rem;
	}
}

/* Phones and tablets: fewer and smaller shapes, so the page stays calm. */
@media (max-width: 991.98px) {
	.decor {
		opacity: 0.7;
	}

	.decor > .decor__curve,
	.decor--hero > .decor__glow,
	.decor--page-header > .decor__dots,
	.decor--section-b > .decor__dotwave,
	.decor--section-c > .decor__dotwave,
	.decor--footer > .decor__ring {
		display: none;
	}

	.decor__dots {
		width: 5.5rem;
		height: 5.5rem;
	}

	.decor__ring {
		width: 11rem;
	}

	.decor__dotwave {
		width: 20rem;
		height: 14rem;
	}

	.decor--hero .decor__dots {
		top: 0.75rem;
		right: 0.5rem;
		height: 3.5rem;
	}

	.decor--hero .decor__ring {
		top: auto;
		right: -4rem;
		bottom: 3rem;
		left: auto;
	}

	.decor--section-a .decor__dots {
		top: 1rem;
		right: var(--decor-edge);
		height: 3.5rem;
	}

	.decor--section-a .decor__ring {
		bottom: -5rem;
		left: -5rem;
		width: 12rem;
	}

	.decor--page-header .decor__slant {
		right: -5rem;
		width: 42%;
		background: linear-gradient(180deg, rgba(var(--color-primary-rgb), 0.25), rgba(var(--color-primary-rgb), 0.1));
	}

	.decor--page-header .decor__stripe {
		display: none;
	}

	.decor--page-header .decor__redbar {
		right: calc(42% - 4rem);
	}

	.decor--section-a .decor__reddot {
		bottom: 4.85rem;
		left: 4.85rem;
	}

	.decor--section-b .decor__redbars,
	.decor--section-c .decor__redbars {
		top: 1rem;
		width: 0.9rem;
		height: 1.375rem;
		background: linear-gradient(90deg, var(--decor-accent) 0 0.3rem, transparent 0.3rem 0.6rem, var(--decor-accent) 0.6rem);
	}

	.decor--section-b .decor__redbars,
	.decor--section-c .decor__redbars {
		right: var(--decor-edge);
	}

	.decor--quote .decor__ring {
		right: -5rem;
		bottom: -5rem;
		width: 14rem;
	}

	.decor--contact .decor__ring {
		top: -4rem;
		right: -5rem;
	}

	.decor--contact .decor__dots {
		right: 0.5rem;
		bottom: 1.5rem;
	}
}

/* ---------- 15. WordPress classes ---------- */

/* Text for screen readers only. WordPress prints this class itself (for example
   in comment and pagination markup); the theme's own templates use Bootstrap's
   .visually-hidden, which works the same way. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	z-index: 100000;
	top: 0.5rem;
	left: 0.5rem;
	width: auto;
	height: auto;
	padding: 0.75rem 1rem;
	clip: auto;
	background: var(--color-white);
	color: var(--color-deep);
	font-weight: 700;
	text-decoration: none;
}

/* Image alignment from older (classic editor) content, such as posts copied
   from the old website. The block editor's own alignment styles are unchanged. */
.alignleft {
	float: left;
	margin: 0.375rem 1.5rem 1rem 0;
}

.alignright {
	float: right;
	margin: 0.375rem 0 1rem 1.5rem;
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

@media (max-width: 575.98px) {
	.alignleft,
	.alignright {
		float: none;
		margin: 0 0 1rem;
	}
}

.wp-caption {
	max-width: 100%;
	margin-bottom: 1.5rem;
}

.wp-caption img {
	display: block;
	max-width: 100%;
	height: auto;
}

.wp-caption-text,
.gallery-caption {
	margin-top: 0.5rem;
	color: var(--color-muted);
	font-size: var(--fs-meta);
}

/* "Pages: 1 2 3" under a post or page split with the Page Break block. */
.page-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	clear: both;
	margin-top: 2rem;
}

.page-links__label {
	margin-right: 0.25rem;
	font-weight: 700;
}

.page-links > span:not(.page-links__label),
.page-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	text-decoration: none;
}

.page-links > span:not(.page-links__label) {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

.page-links a:hover {
	border-color: var(--color-primary);
}