/* ==========================================================================
   Somerset Roofline Care - site styles
   Loaded on the front end via wp_enqueue_style() and into the block editor
   via add_editor_style(), both from functions.php. Block themes do NOT load
   style.css, so nothing here belongs in that file.

   Colours, fonts and sizes come from theme.json presets and are aliased to
   short custom properties below so the Site Editor Styles panel stays the
   real control: change a palette colour there and it changes here too.
   ========================================================================== */

:root {
	--primary: var(--wp--preset--color--primary, #202427);
	--primary-fg: var(--wp--preset--color--primary-contrast, #ffffff);
	--accent: var(--wp--preset--color--accent, #d8c08a);
	--accent-fg: var(--wp--preset--color--accent-contrast, #1a1c1e);
	--accent-on-dark: var(--wp--preset--color--accent-on-dark, #e2cfa4);
	--bg: var(--wp--preset--color--base, #ffffff);
	--fg: var(--wp--preset--color--ink, #1a1c1e);
	--muted: var(--wp--preset--color--muted, #f6f5f2);
	--muted-fg: var(--wp--preset--color--muted-text, #5c6166);
	--border: var(--wp--preset--color--outline, #e5e3dd);
	--card: #ffffff;
	--nav-fg: #e0e0e1;
	--nav-fg-hover: #ffffff;

	--font-head: var(--wp--preset--font-family--heading, Oswald, sans-serif);
	--font-body: var(--wp--preset--font-family--body, Inter, sans-serif);

	--wrap: 1140px;
	--gutter: 22px;
	--r: 14px;
	--shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px rgb(0 0 0 / 0.06);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* Clearance for the fixed mobile call bar. */
	padding-bottom: 78px;
}

@media (min-width: 1000px) {
	body {
		padding-bottom: 0;
	}
}

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

/* --------------------------------------------------------------------------
   Sections. One full-bleed band per block of content; the constrained layout
   from theme.json caps the inner column at 1140px.
   -------------------------------------------------------------------------- */

/* Every top-level block on a page is a full-bleed band that carries its own
   vertical padding, so the 22px blockGap WordPress puts between them shows up
   as a white stripe across the page. Two classes to outrank the generated
   `.wp-block-post-content-is-layout-constrained > *` rule. */
.site-main > .entry-content > * {
	margin-block: 0;
}

/* Same reason one level up: the header, main and footer are siblings inside
   .wp-site-blocks, so blockGap puts a white stripe under the sticky header. */
body .wp-site-blocks > * {
	margin-block: 0;
}

.sec {
	padding-block: clamp(56px, 7vw, 104px);
	padding-inline: var(--gutter);
}

.sec.alt {
	background: var(--muted);
}

/* Two bands sharing a ground read as one long empty block: their facing
   paddings add up with no colour change to break it. Collapse the second
   one's top padding whenever the grounds match. */
.sec.alt + .sec.alt,
.sec:not(.alt):not(.callout) + .sec:not(.alt):not(.callout) {
	padding-top: 0;
}

.sec-narrow > * {
	max-width: 760px;
	margin-inline: auto;
}

/* Centred section heading, with the accent rule under the H2. */
.head {
	text-align: center;
	max-width: 660px;
	margin-inline: auto;
	margin-bottom: clamp(30px, 4vw, 52px);
}

.head > * {
	margin-block: 0;
}

.head .eyebrow {
	margin-bottom: 10px;
}

.head h2::after {
	content: "";
	display: block;
	width: 52px;
	height: 3px;
	border-radius: 2px;
	background: var(--primary);
	margin: 18px auto 0;
}

.eyebrow {
	font-family: var(--font-head);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--primary);
}

.lede {
	color: var(--muted-fg);
	font-size: 1.05rem;
	margin-top: 14px;
}

.head .lede {
	margin-top: 14px;
}

/* --------------------------------------------------------------------------
   Icons. Lucide glyphs are painted with mask-image from a custom property, so
   the markup stays a plain empty core/group with a className hook and nothing
   in the post content is an SVG.
   -------------------------------------------------------------------------- */

.ico {
	width: 48px;
	height: 48px;
	border-radius: 11px;
	background: var(--accent);
	margin-bottom: 17px;
	position: relative;
	transition: transform 0.35s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.ico::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 23px;
	height: 23px;
	background: var(--accent-fg);
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

.card:hover .ico {
	transform: scale(1.08) rotate(-3deg);
}

/* --------------------------------------------------------------------------
   Header: utility strip + brand + navigation + call button
   -------------------------------------------------------------------------- */

/* z-index has to clear the fixed call bar (60). The sticky header creates a
   stacking context, so the nav's full-screen overlay - z-index 100000 inside
   it - can never rise above the header's own level; at 50 the call bar painted
   straight over the open menu. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 70;
	background: var(--primary);
	border-bottom: 1px solid rgb(255 255 255 / 0.12);
}

.utility {
	background: var(--primary);
	color: color-mix(in srgb, var(--primary-fg) 82%, transparent);
	font-size: 0.82rem;
	border-bottom: 1px solid rgb(255 255 255 / 0.1);
	padding-inline: var(--gutter);
}

.utility-in {
	max-width: var(--wrap);
	margin-inline: auto;
	min-height: 38px;
	gap: 16px;
	flex-wrap: nowrap;
}

.utility-in p {
	margin: 0;
	white-space: nowrap;
}

.utility a {
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 600;
	padding: 11px 0;
	margin-block: -11px;
}

.utility a:hover {
	color: var(--primary-fg);
	text-decoration: none;
}

.u-phone a::before,
.u-social a::before {
	content: "";
	width: 15px;
	height: 15px;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

.u-phone a::before {
	--icon: var(--icon-phone);
}

.u-social a::before {
	--icon: var(--icon-facebook);
	width: 16px;
	height: 16px;
}

@media (max-width: 520px) {
	.u-social a span,
	.u-social {
		font-size: 0.76rem;
	}
}

/* 375px still has room for the number, the mark and the words - only drop the
   wording on the narrowest phones, as the static build does. */
@media (max-width: 340px) {
	.u-social a {
		font-size: 0;
	}
	.u-social a::before {
		width: 18px;
		height: 18px;
	}
}

.hdr {
	padding-inline: var(--gutter);
}

.nav {
	max-width: var(--wrap);
	margin-inline: auto;
	gap: 14px;
	min-height: 64px;
	flex-wrap: nowrap;
}

.brand {
	gap: 12px;
	flex-wrap: nowrap;
	min-width: 0;
	flex: 0 1 auto;
}

.brand .logomark {
	margin: 0;
	flex: none;
}

.brand .logomark img {
	width: 40px;
	height: 40px;
	object-fit: contain;
	display: block;
}

.brandtext {
	gap: 0;
	min-width: 0;
}

.brandtext p {
	margin: 0;
}

.brandname {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: clamp(1rem, 2.1vw, 1.34rem);
	line-height: 1.14;
	overflow-wrap: anywhere;
}

.brandname a,
.brandloc {
	color: var(--nav-fg-hover);
	text-decoration: none;
}

.brandname a:hover {
	text-decoration: none;
}

.brandloc {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	opacity: 0.8;
}

/* Navigation ------------------------------------------------------------- */

/* The colour goes on the container, not on the anchors: core ships
   `.wp-block-navigation a:where(:not(.wp-element-button)) { color: inherit }`
   at the same specificity as `.mainnav a` and wins on source order, which left
   the links rendering in body-text near-black on the near-black header. */
.mainnav {
	flex: 1 1 auto;
	justify-content: flex-end;
	color: var(--nav-fg);
}

.mainnav .wp-block-navigation__container {
	gap: 24px;
}

.mainnav a:where(:not(.wp-element-button)),
.mainnav .wp-block-navigation-item__content {
	color: var(--nav-fg);
	font-size: 0.94rem;
	font-weight: 600;
	text-decoration: none;
}

.mainnav a:where(:not(.wp-element-button)):hover,
.mainnav .wp-block-navigation-item__content:hover {
	color: var(--nav-fg-hover);
	text-decoration: none;
}

.mainnav .current-menu-item > a,
.mainnav a[aria-current="page"] {
	color: var(--accent-on-dark);
}

/* Submenu panel, desktop. */
.mainnav .wp-block-navigation__submenu-container {
	background: var(--primary);
	border: 1px solid rgb(255 255 255 / 0.16);
	border-radius: 12px;
	box-shadow: 0 14px 40px rgb(0 0 0 / 0.3);
	padding: 8px;
	min-width: 248px;
}

.mainnav .wp-block-navigation__submenu-container a:where(:not(.wp-element-button)) {
	padding: 9px 13px;
	border-radius: 8px;
	font-size: 0.9rem;
	color: color-mix(in srgb, var(--primary-fg) 88%, transparent);
}

.mainnav .wp-block-navigation__submenu-container a:where(:not(.wp-element-button)):hover {
	background: rgb(255 255 255 / 0.09);
	color: var(--accent-on-dark);
}

/* Mobile overlay, styled to match the dark header. The burger gets the same
   44px bordered box the static build used, so it reads as a button. */
.mainnav .wp-block-navigation__responsive-container-open,
.mainnav .wp-block-navigation__responsive-container-close {
	color: var(--primary-fg);
}

/* No `display` here: core toggles this button with display, and setting it
   unconditionally leaves the burger showing next to the desktop links. */
.mainnav .wp-block-navigation__responsive-container-open:not(.always-shown) {
	width: 44px;
	height: 44px;
	border: 1px solid rgb(255 255 255 / 0.28);
	border-radius: 11px;
	align-items: center;
	justify-content: center;
	transition: border-color 0.18s ease, color 0.18s ease;
}

/* Core switches to the overlay at 600px. The static build keeps the inline
   links only down to 1000px, because below that the row does not fit, so move
   the switch to match. */
@media (max-width: 999px) {
	.mainnav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.mainnav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

.mainnav .wp-block-navigation__responsive-container-open:not(.always-shown):hover {
	border-color: var(--accent-on-dark);
	color: var(--accent-on-dark);
}

/* Ground and ink for the open overlay come from the block's own
   overlayBackgroundColor / overlayTextColor attributes, so only spacing and
   scale are set here. */
.mainnav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px var(--gutter);
}

.mainnav .wp-block-navigation__responsive-container.is-menu-open a:where(:not(.wp-element-button)) {
	color: inherit;
	font-size: 1.1rem;
}

/* The nav's layout is right-aligned for the desktop bar; the overlay is a
   stacked list and reads left-aligned, as the static build's menu did. */
.mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
.mainnav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start;
	text-align: left;
}

.mainnav
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding-left: 12px;
}

/* Header call button ----------------------------------------------------- */

.wp-block-buttons.hdr-call {
	flex: none;
	margin: 0;
}

.hdr-call .wp-block-button__link {
	background: var(--accent);
	color: var(--accent-fg);
	padding: 11px 18px;
	font-size: 0.95rem;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.hdr-call .wp-block-button__link::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--icon-phone) center / contain no-repeat;
	mask: var(--icon-phone) center / contain no-repeat;
}

.hdr-call .wp-block-button__link:hover {
	filter: brightness(1.06);
}

/* Two classes, for the same reason as the call bar below: WordPress prints
   `.wp-block-buttons-is-layout-flex { display: flex }` after this stylesheet.
   Left at one class the header call button survives on a phone, and three
   columns do not fit 375px - it broke the business name across three lines.
   The sticky bottom bar already carries Call Now. */
@media (max-width: 999px) {
	.wp-block-buttons.hdr-call {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	box-shadow: var(--shadow);
	transition: 0.18s;
	text-decoration: none;
}

.wp-block-button__link:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
	text-decoration: none;
}

/* Icon variants, applied with a className on the button block. */
.btn-call .wp-block-button__link::before,
.btn-quote .wp-block-button__link::before,
.btn-wa .wp-block-button__link::before {
	content: "";
	width: 19px;
	height: 19px;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

.btn-call .wp-block-button__link::before {
	--icon: var(--icon-phone);
}

.btn-quote .wp-block-button__link::before {
	--icon: var(--icon-file-text);
}

.btn-wa .wp-block-button__link::before {
	--icon: var(--icon-whatsapp);
}

/* Light-ground outline button. */
.btn-outline .wp-block-button__link {
	background: transparent;
	color: var(--primary);
	border: 1px solid var(--primary);
	box-shadow: none;
}

.btn-outline .wp-block-button__link:hover {
	background: var(--accent);
	color: var(--accent-fg);
}

/* Dark-ground ghost button - never used on a light section. */
.btn-ghost .wp-block-button__link {
	background: rgb(255 255 255 / 0.14);
	color: #fff;
	border: 1px solid rgb(255 255 255 / 0.4);
	box-shadow: none;
}

.btn-ghost .wp-block-button__link:hover {
	background: rgb(255 255 255 / 0.24);
}

/* On a primary ground the solid button flips to white. */
.callout .btn-call .wp-block-button__link {
	background: #fff;
	color: var(--primary);
}

.wp-block-buttons {
	gap: 13px;
}

/* --------------------------------------------------------------------------
   Hero (home) and page heroes
   -------------------------------------------------------------------------- */

.wp-block-cover.hero,
.wp-block-cover.pagehero {
	padding-inline: var(--gutter);
}

.hero {
	min-height: min(88vh, 760px);
	padding-block: clamp(72px, 9vw, 128px);
}

.hero .wp-block-cover__inner-container,
.pagehero .wp-block-cover__inner-container {
	max-width: var(--wrap);
	margin-inline: auto;
	width: 100%;
}

/* Hero photo drifts very slowly - reads as depth, not as an effect. */
@keyframes srlcHeroDrift {
	from {
		transform: scale(1.04);
	}
	to {
		transform: scale(1.14);
	}
}

.hero .wp-block-cover__image-background {
	animation: srlcHeroDrift 26s ease-out forwards;
}

.hero-split {
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}

.hero-split > .wp-block-column:first-child {
	flex-basis: 57% !important;
}

.hero-split > .wp-block-column:last-child {
	flex-basis: 43% !important;
	min-width: 320px;
}

.hero-inner > * {
	margin-block: 0;
}

.hero-inner > * + * {
	margin-top: 16px;
}

.hero .eyebrow {
	color: var(--accent-on-dark);
	letter-spacing: 0.18em;
}

.hero h1,
.pagehero h1 {
	color: #fff;
	text-wrap: balance;
}

.hero-sub {
	font-family: var(--font-head);
	font-weight: 400;
	font-size: clamp(1.15rem, 1.7vw, 1.4rem);
	letter-spacing: 0.01em;
	color: rgb(255 255 255 / 0.92);
}

/* Trust pills under the hero copy. */
.trustpills {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 0;
	padding: 0;
}

.trustpills li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.88rem;
	font-weight: 600;
	padding: 9px 14px;
	border-radius: 999px;
	background: rgb(255 255 255 / 0.14);
	border: 1px solid rgb(255 255 255 / 0.24);
	color: #fff;
}

.trustpills li::before {
	content: "";
	width: 15px;
	height: 15px;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--icon-check) center / contain no-repeat;
	mask: var(--icon-check) center / contain no-repeat;
}

/* The rating pill leads with the Google mark, which has to keep its own
   four colours, so it is a background-image rather than a mask. */
.trustpills li:first-child::before {
	background: var(--google-g) center / contain no-repeat;
	-webkit-mask: none;
	mask: none;
	width: 16px;
	height: 16px;
}

@media (max-width: 720px) {
	.trustpills li:nth-child(n + 3) {
		display: none;
	}
}

/* Hero enquiry card ------------------------------------------------------ */

.heroform {
	background: rgb(255 255 255 / 0.13);
	backdrop-filter: blur(9px);
	border: 1px solid rgb(255 255 255 / 0.22);
	border-radius: 14px;
	padding: 16px 16px 13px;
}

.heroform-lead {
	margin: 0 0 12px;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: rgb(255 255 255 / 0.95);
	text-align: center;
}

@media (max-width: 781px) {
	.hero {
		min-height: auto;
		padding-block: clamp(30px, 9vh, 60px) clamp(34px, 10vh, 66px);
	}
	.hero-inner {
		text-align: center;
	}
	.hero-inner .trustpills,
	.hero-inner .wp-block-buttons {
		justify-content: center;
	}
	.heroform {
		max-width: 26em;
		margin-inline: auto;
		padding: 14px;
	}
}

/* Page heroes ------------------------------------------------------------ */

.pagehero {
	min-height: 0;
	padding-block: clamp(56px, 9vw, 104px) clamp(48px, 7vw, 84px);
}

.pagehero .wp-block-cover__inner-container > * {
	margin-block: 0;
	margin-inline: 0;
	max-width: 64ch;
	text-align: left;
}

.pagehero .wp-block-cover__inner-container > * + * {
	margin-top: 12px;
}

.pagehero .eyebrow {
	color: rgb(255 255 255 / 0.82);
}

.pagehero h1 {
	font-size: clamp(1.9rem, 4.4vw, 3rem);
}

.pagehero .lede {
	color: rgb(255 255 255 / 0.92);
	margin-top: 12px;
}

.pagehero + .sec {
	padding-top: clamp(40px, 5vw, 64px);
}

/* --------------------------------------------------------------------------
   Cards and grids
   -------------------------------------------------------------------------- */

.card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--r);
	padding: 28px;
	text-align: center;
	position: relative;
	overflow: hidden;
	transition: 0.2s;
	height: 100%;
}

.card > * {
	margin-block: 0;
}

.card > * + * {
	margin-top: 9px;
}

.card .ico {
	margin-inline: auto;
	margin-bottom: 17px;
}

.card h3 {
	margin-top: 0;
}

.card p {
	color: var(--muted-fg);
	font-size: 0.95rem;
}

.card .wp-block-buttons {
	margin-top: 18px;
	justify-content: center;
}

.card::before {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	height: 3px;
	width: 100%;
	background: var(--primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.card:hover {
	border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
	box-shadow: var(--shadow);
	transform: translateY(-2px);
}

.card:hover::before {
	transform: scaleX(1);
}

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

.card h3 a:hover {
	color: var(--primary);
}

/* --------------------------------------------------------------------------
   Trust band under the home hero
   -------------------------------------------------------------------------- */

.trustband {
	padding-block: 22px;
	background: var(--muted);
	border-block: 1px solid var(--border);
}

.trustband ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 13px 30px;
}

.trustband li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-weight: 600;
	font-size: 0.92rem;
}

.trustband li::before {
	content: "";
	width: 20px;
	height: 20px;
	flex: none;
	background: var(--primary);
	-webkit-mask: var(--icon-shield-check) center / contain no-repeat;
	mask: var(--icon-shield-check) center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   Tick lists, included lists and area chips
   -------------------------------------------------------------------------- */

.ticks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.ticks li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 500;
	color: var(--fg);
}

.ticks li::before {
	content: "";
	width: 19px;
	height: 19px;
	flex: none;
	margin-top: 3px;
	background: var(--primary);
	-webkit-mask: var(--icon-check) center / contain no-repeat;
	mask: var(--icon-check) center / contain no-repeat;
}

.areachips {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.areachips li {
	display: inline-flex;
}

.areachips a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid var(--border);
	border-radius: 100px;
	background: var(--card);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--fg);
	text-decoration: none;
	transition: 0.16s;
}

.areachips a::before {
	content: "";
	width: 15px;
	height: 15px;
	flex: none;
	background: var(--accent);
	-webkit-mask: var(--icon-map-pin) center / contain no-repeat;
	mask: var(--icon-map-pin) center / contain no-repeat;
}

.areachips a:hover {
	border-color: var(--accent);
	color: var(--accent);
	text-decoration: none;
}

/* "Other services" list - one link per row, thumb-sized. */
.linklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
	max-width: 560px;
}

.linklist li {
	border-bottom: 1px solid var(--border);
}

.linklist li:last-child {
	border-bottom: 0;
}

.linklist a {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 52px;
	padding: 6px 0;
	text-decoration: none;
	color: var(--fg);
	font-weight: 600;
}

.linklist a::before {
	content: "";
	width: 17px;
	height: 17px;
	flex: none;
	opacity: 0.75;
	background: var(--primary);
	-webkit-mask: var(--icon-chevron-right) center / contain no-repeat;
	mask: var(--icon-chevron-right) center / contain no-repeat;
}

.linklist a:hover {
	color: var(--primary);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Service rows: copy beside a photo
   -------------------------------------------------------------------------- */

.svcrow {
	align-items: flex-start;
	gap: clamp(24px, 4vw, 48px);
}

.svcrow .wp-block-column > * {
	margin-block: 0;
}

.svcrow .wp-block-column > * + * {
	margin-top: 16px;
}

.svcrow h2 {
	text-wrap: balance;
}

.svcimg {
	margin: 0;
}

.svcimg img {
	width: 100%;
	max-height: 520px;
	object-fit: cover;
	border-radius: var(--r);
	border: 1px solid var(--border);
	aspect-ratio: 4 / 3;
}

@media (max-width: 781px) {
	.svcimg img {
		max-height: none;
	}
}

.inclabel {
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--muted-fg);
}

.prose > * {
	max-width: 66ch;
}

.prose p {
	color: var(--muted-fg);
}

.revline {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	color: var(--muted-fg);
	font-size: 0.95rem;
}

.revline::before {
	content: "";
	width: 17px;
	height: 17px;
	flex: none;
	margin-top: 4px;
	background: #fbbf24;
	-webkit-mask: var(--icon-star) center / contain no-repeat;
	mask: var(--icon-star) center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   Numbered process steps
   -------------------------------------------------------------------------- */

.pnum p {
	margin: 0;
}

.pstep .pnum {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--primary);
	color: var(--primary-fg);
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.15rem;
	margin: 0 auto 16px;
}

/* --------------------------------------------------------------------------
   Galleries
   -------------------------------------------------------------------------- */

/* Core's gallery is a flex row, so the last row stretches its two remaining
   tiles to half width each. The demo uses a grid, where a short last row keeps
   the column width and leaves the gap. Grid it is - three columns on the home
   page, and a 260px auto-fill (four at desktop) on Our Work and the service
   pages, matching .galgrid and .workgrid in the static build. */
.galgrid.wp-block-gallery,
.workgrid.wp-block-gallery {
	display: grid;
	gap: 14px;
}

.galgrid.wp-block-gallery {
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 760px) {
	.galgrid.wp-block-gallery {
		grid-template-columns: repeat(3, 1fr);
	}
}

.workgrid.wp-block-gallery {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.galgrid.wp-block-gallery figure.wp-block-image,
.workgrid.wp-block-gallery figure.wp-block-image {
	width: auto;
	max-width: none;
	margin: 0;
	border-radius: var(--r);
	overflow: hidden;
	border: 1px solid var(--border);
	background: var(--muted);
}

.galgrid.wp-block-gallery figure.wp-block-image img,
.workgrid.wp-block-gallery figure.wp-block-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	flex: none;
}

/* --------------------------------------------------------------------------
   Reviews - a static grid of quotes, no carousel
   -------------------------------------------------------------------------- */

.revcard.wp-block-quote {
	background: var(--card);
	border: 1px solid var(--border);
	border-left: 1px solid var(--border);
	border-radius: 18px;
	padding: clamp(24px, 3vw, 32px);
	margin: 0;
	text-align: center;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Five gold stars, drawn by repeating the star mask across a fixed width. */
.revcard.wp-block-quote::before {
	content: "";
	display: block;
	width: 80px;
	height: 16px;
	margin: 0 auto;
	background: #fbbf24;
	-webkit-mask: var(--icon-star) left center / 16px 16px repeat-x;
	mask: var(--icon-star) left center / 16px 16px repeat-x;
}

.revcard.wp-block-quote p {
	margin: 0;
	color: var(--fg);
	line-height: 1.7;
	font-size: 0.98rem;
	font-style: normal;
	flex: 1;
}

.revcard.wp-block-quote cite {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	color: var(--muted-fg);
	font-size: 0.9rem;
	font-weight: 600;
	font-style: normal;
	padding-top: 14px;
	border-top: 1px solid var(--border);
}

.revcard.wp-block-quote cite::before {
	content: "";
	width: 17px;
	height: 17px;
	flex: none;
	background: var(--google-g) center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   FAQs
   -------------------------------------------------------------------------- */

.wp-block-details {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
	transition: box-shadow 0.25s, border-color 0.25s;
	padding: 0;
}

.wp-block-details[open] {
	box-shadow: var(--shadow);
	border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
}

.wp-block-details summary {
	padding: 19px 22px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	font-size: 0.98rem;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "";
	width: 9px;
	height: 9px;
	flex: none;
	border-right: 2.5px solid var(--muted-fg);
	border-bottom: 2.5px solid var(--muted-fg);
	transform: rotate(45deg) translateY(-3px);
	transition: 0.2s;
}

.wp-block-details[open] summary::after {
	transform: rotate(-135deg) translateY(-3px);
}

.wp-block-details p {
	padding: 0 22px 21px;
	margin: 0;
	color: var(--muted-fg);
	font-size: 0.95rem;
}

.faqlist {
	display: grid;
	gap: 11px;
	max-width: 760px;
	margin-inline: auto;
}

.faqlist > * {
	margin-block: 0;
}

/* --------------------------------------------------------------------------
   Contact details card
   -------------------------------------------------------------------------- */

.cbox > * {
	margin-block: 0;
}

.cbox > * + * {
	margin-top: 16px;
}

.crow {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 17px 20px;
	border-radius: 12px;
	background: var(--muted);
	border: 1px solid var(--border);
}

.crow::before {
	content: "";
	width: 21px;
	height: 21px;
	flex: none;
	background: var(--primary);
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

.crow.crow-phone::before {
	--icon: var(--icon-phone);
}

.crow.crow-place::before {
	--icon: var(--icon-map-pin);
}

.crow-text {
	min-width: 0;
}

.crow-text p {
	margin: 0;
	font-weight: 700;
}

.crow-text p a {
	text-decoration: none;
}

.crow-text p.crow-label {
	opacity: 0.75;
	font-weight: 500;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 2px;
}

/* --------------------------------------------------------------------------
   Quote callout (template part) and the map strip
   -------------------------------------------------------------------------- */

.callout {
	background: var(--primary);
	color: var(--primary-fg);
}

.callout h2,
.callout h3 {
	color: var(--primary-fg);
}

.callout .eyebrow {
	color: var(--accent-on-dark);
}

.callout p {
	color: color-mix(in srgb, var(--primary-fg) 84%, transparent);
}

.callout-in {
	gap: clamp(28px, 4vw, 52px);
	align-items: center;
}

.callout-in > .wp-block-column > * {
	margin-block: 0;
}

.callout-in > .wp-block-column > * + * {
	margin-top: 16px;
}

.mapstrip {
	line-height: 0;
	border-top: 1px solid var(--border);
}

.mapstrip iframe {
	width: 100%;
	height: 300px;
	border: 0;
	display: block;
	filter: saturate(0.92);
}

@media (max-width: 700px) {
	.mapstrip iframe {
		height: 230px;
	}
}

.cmap {
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--border);
	line-height: 0;
}

.cmap iframe {
	width: 100%;
	height: 260px;
	border: 0;
	display: block;
	filter: saturate(0.9);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

footer.wp-block-template-part {
	background: var(--fg);
	color: rgb(255 255 255 / 0.62);
	font-size: 0.88rem;
}

.footer-in {
	padding: 52px var(--gutter) 96px;
	max-width: var(--wrap);
	margin-inline: auto;
}

@media (min-width: 1000px) {
	.footer-in {
		padding-bottom: 52px;
	}
}

.footer-in h2,
.footer-in h3,
.footer-in strong {
	color: #fff;
}

.fcol h3 {
	color: #fff;
	font-size: 0.95rem;
	margin: 0 0 11px;
	font-family: var(--font-body);
	font-weight: 700;
	letter-spacing: 0;
}

.fcol p,
.fcol ul {
	margin: 0;
}

.fcol ul {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 6px;
}

.fcol a {
	text-decoration: none;
}

.fcol a:hover {
	color: #fff;
}

.fsocial a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 11px;
	border: 1px solid rgb(255 255 255 / 0.18);
	color: inherit;
	margin-top: 10px;
	text-decoration: none;
}

.fsocial a::before {
	content: "";
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: var(--icon-facebook) center / contain no-repeat;
	mask: var(--icon-facebook) center / contain no-repeat;
}

.fsocial a:hover {
	border-color: currentColor;
	background: rgb(255 255 255 / 0.08);
}

.legal {
	margin-top: 34px;
	padding-top: 22px;
	border-top: 1px solid rgb(255 255 255 / 0.14);
	font-size: 0.8rem;
}

.legal p {
	margin: 0;
}

.legal a {
	display: inline-block;
	margin-left: 16px;
	padding: 11px 4px;
	margin-block: -8px;
	opacity: 0.85;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.legal a:hover {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Mobile call bar. Opaque, no backdrop-filter: on iOS Safari a fixed element
   that also carries backdrop-filter gets rasterised into the page layer and
   scrolls away with the content.
   -------------------------------------------------------------------------- */

.wp-block-buttons.callbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 11px 14px calc(11px + env(safe-area-inset-bottom, 0px));
	background: var(--bg);
	border-top: 1px solid var(--border);
	box-shadow: 0 -6px 20px rgb(0 0 0 / 0.08);
}

.callbar .wp-block-button {
	flex: 1 1 0;
	min-width: 0;
}

.callbar .wp-block-button__link {
	width: 100%;
	min-height: 50px;
	padding: 12px 5px;
	font-size: 0.86rem;
	white-space: nowrap;
	gap: 5px;
	border-radius: 10px;
	letter-spacing: 0;
}

.callbar .wp-block-button__link::before {
	width: 16px;
	height: 16px;
}

.callbar .btn-wa .wp-block-button__link {
	background: #25d366;
	color: #0b2e18;
}

@media (max-width: 359px) {
	.callbar {
		gap: 6px;
		padding-inline: 9px;
	}
	.callbar .wp-block-button__link {
		font-size: 0.8rem;
		gap: 4px;
		padding: 12px 4px;
	}
}

/* WordPress prints `.wp-block-buttons-is-layout-flex { display: flex }` after
   this stylesheet, so a bare `.callbar` rule loses the tie and the bar stays on
   screen at desktop width. Two classes outrank it. */
@media (min-width: 1000px) {
	.wp-block-buttons.callbar {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */

.legalpage > * {
	max-width: 820px;
	margin-inline: auto;
}

.legalpage h2 {
	margin: 34px 0 10px;
	font-size: clamp(1.15rem, 2vw, 1.5rem);
}

.legalpage p,
.legalpage li {
	color: var(--muted-fg);
}

/* --------------------------------------------------------------------------
   BEFORE / AFTER SLIDER (Custom HTML block; script in assets/js/site.js)
   The after image is clipped from the left by --pos, so the two photos sit in
   exactly the same frame and the wipe reads as one roof changing.
   -------------------------------------------------------------------------- */

.ba {
	margin: 0 auto 34px;
	border-radius: var(--r);
	overflow: hidden;
	box-shadow: var(--shadow);
	background: var(--card);
	max-width: 760px;
}

.ba-media {
	position: relative;
	isolation: isolate;
	line-height: 0;
	background: var(--muted);
}

.ba-img {
	display: block;
	width: 100%;
	aspect-ratio: var(--ar, 4 / 3);
	object-fit: cover;
	user-select: none;
	-webkit-user-drag: none;
}

.ba-after {
	position: absolute;
	inset: 0;
	height: 100%;
	clip-path: inset(0 0 0 var(--pos, 50%));
	will-change: clip-path;
}

.ba-line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos, 50%);
	width: 2px;
	background: var(--accent);
	transform: translateX(-1px);
	pointer-events: none;
	box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25);
}

.ba-grip {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 46px;
	height: 46px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--accent);
	border: 2px solid rgb(255 255 255 / 0.9);
	box-shadow: 0 4px 16px rgb(0 0 0 / 0.35);
	display: grid;
	place-items: center;
}

.ba-grip::before,
.ba-grip::after {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	border-block: 5px solid transparent;
}

.ba-grip::before {
	border-right: 7px solid var(--accent-fg);
	left: 11px;
}

.ba-grip::after {
	border-left: 7px solid var(--accent-fg);
	right: 11px;
}

.ba-range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: ew-resize;
	-webkit-appearance: none;
	appearance: none;
	background: none;
}

.ba-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 46px;
	height: 46px;
}

.ba-range::-moz-range-thumb {
	width: 46px;
	height: 46px;
	border: 0;
}

.ba-range:focus-visible ~ .ba-line .ba-grip {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
}

.ba-tag {
	position: absolute;
	top: 14px;
	z-index: 1;
	pointer-events: none;
	font: 600 0.72rem/1 var(--font-body);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 7px 11px;
	border-radius: 99px;
	color: #fff;
	background: rgb(0 0 0 / 0.55);
}

.ba-tag--b {
	left: 14px;
}

.ba-tag--a {
	right: 14px;
	background: var(--accent);
	color: var(--accent-fg);
}

.ba figcaption {
	padding: 18px 20px 20px;
	background: var(--card);
	border-top: 1px solid var(--border);
	text-align: left;
}

.ba figcaption strong {
	display: block;
	font-family: var(--font-head);
	font-size: 1.16rem;
	margin-bottom: 5px;
}

.ba figcaption > span {
	display: block;
	color: var(--muted-fg);
	font-size: 0.95rem;
	line-height: 1.6;
}

.ba .ba-loc {
	font: 600 0.72rem/1 var(--font-body);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--muted-fg);
	margin-bottom: 7px;
}

.ba-spec {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.ba-spec li {
	font-size: 0.83rem;
	padding: 5px 11px;
	border-radius: 99px;
	background: var(--muted);
	border: 1px solid var(--border);
	color: var(--fg);
}

@media (max-width: 640px) {
	.ba-grip {
		width: 40px;
		height: 40px;
	}
	.ba-tag {
		font-size: 0.66rem;
		padding: 6px 9px;
	}
}

.ba--sm {
	max-width: 620px;
}

.ba--sm .ba-grip {
	width: 38px;
	height: 38px;
}

.ba--sm .ba-grip::before {
	left: 9px;
}

.ba--sm .ba-grip::after {
	right: 9px;
}

@media (prefers-reduced-motion: reduce) {
	.ba-after {
		will-change: auto;
	}
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}

/* --------------------------------------------------------------------------
   WPForms - styled to match the hand-built forms on the static site.
   Two grounds: the translucent card in the hero, and the dark quote callout.
   -------------------------------------------------------------------------- */

.wpforms-container {
	margin: 0 !important;
}

/* The form title is set in WPForms and duplicates the heading beside it. */
.wpforms-container .wpforms-head-container,
.wpforms-container .wpforms-title,
.wpforms-container .wpforms-description {
	display: none !important;
}

.wpforms-container .wpforms-field-container {
	display: grid;
	gap: 12px;
}

.wpforms-container .wpforms-field {
	padding: 0 !important;
	margin: 0 !important;
}

.wpforms-container .wpforms-field-label,
.wpforms-container .wpforms-field-sublabel {
	display: block;
	font-size: 0.82rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted-fg);
	margin-bottom: 5px !important;
}

.wpforms-container input[type="text"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="email"],
.wpforms-container textarea {
	width: 100% !important;
	max-width: 100% !important;
	padding: 12px 14px !important;
	border-radius: 11px !important;
	border: 1px solid var(--border) !important;
	background: var(--bg);
	color: var(--fg);
	font: inherit !important;
	font-size: 0.96rem !important;
	box-shadow: none !important;
}

.wpforms-container textarea {
	min-height: 104px !important;
	resize: vertical;
}

.wpforms-container input:focus-visible,
.wpforms-container textarea:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 1px;
}

.wpforms-container .wpforms-submit-container {
	padding: 0 !important;
	margin-top: 4px;
}

.wpforms-container button.wpforms-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	border: 1px solid transparent !important;
	border-radius: 100px !important;
	padding: 13px 28px !important;
	background: var(--primary) !important;
	color: var(--primary-fg) !important;
	font-family: var(--font-body) !important;
	font-size: 0.96rem !important;
	font-weight: 700 !important;
	cursor: pointer;
	transition: 0.18s;
}

.wpforms-container button.wpforms-submit::before {
	content: "";
	width: 19px;
	height: 19px;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--icon-file-text) center / contain no-repeat;
	mask: var(--icon-file-text) center / contain no-repeat;
}

.wpforms-container button.wpforms-submit:hover {
	filter: brightness(1.12);
	transform: translateY(-1px);
}

.wpforms-container .wpforms-required-label {
	color: #c0392b;
}

.wpforms-container .wpforms-error {
	font-size: 0.82rem;
	color: #c0392b;
}

/* Hero card ground ------------------------------------------------------- */

.heroform .wpforms-container .wpforms-field-label,
.heroform .wpforms-container .wpforms-field-sublabel {
	color: rgb(255 255 255 / 0.92);
}

.heroform .wpforms-container input[type="text"],
.heroform .wpforms-container input[type="tel"],
.heroform .wpforms-container input[type="email"],
.heroform .wpforms-container textarea {
	background: rgb(255 255 255 / 0.94);
	color: #16202b;
	border-color: rgb(255 255 255 / 0.28) !important;
}

.heroform .wpforms-container textarea {
	min-height: 62px !important;
}

.heroform .wpforms-container .wpforms-field-container {
	gap: 9px;
}

.heroform .wpforms-container .wpforms-field-label,
.heroform .wpforms-container .wpforms-field-sublabel {
	font-size: 0.7rem !important;
	letter-spacing: 0.08em;
	margin-bottom: 3px !important;
}

.heroform .wpforms-container input[type="text"],
.heroform .wpforms-container input[type="tel"],
.heroform .wpforms-container input[type="email"] {
	padding: 10px 13px !important;
	border-radius: 9px !important;
}

.heroform .wpforms-container textarea {
	padding: 10px 13px !important;
	border-radius: 9px !important;
}

.heroform .wpforms-container button.wpforms-submit {
	padding: 11px 20px !important;
}

.heroform .wpforms-container input:focus-visible,
.heroform .wpforms-container textarea:focus-visible {
	outline-color: #fff;
}

.heroform .wpforms-container .wpforms-required-label,
.heroform .wpforms-container .wpforms-error {
	color: #ffd2cc;
}

/* Dark callout ground ---------------------------------------------------- */

.callout .wpforms-container .wpforms-field-label,
.callout .wpforms-container .wpforms-field-sublabel {
	color: color-mix(in srgb, var(--primary-fg) 90%, transparent);
}

.callout .wpforms-container input[type="text"],
.callout .wpforms-container input[type="tel"],
.callout .wpforms-container input[type="email"],
.callout .wpforms-container textarea {
	border-color: rgb(255 255 255 / 0.35) !important;
	background: #fff;
	color: var(--fg);
}

.callout .wpforms-container button.wpforms-submit {
	background: #fff !important;
	color: var(--primary) !important;
}

.callout .wpforms-container .wpforms-required-label,
.callout .wpforms-container .wpforms-error {
	color: #ffd2cc;
}

/* --------------------------------------------------------------------------
   Editor-only tidy-ups. The empty icon groups are invisible in the editor
   without a hint of where they are.
   -------------------------------------------------------------------------- */

.editor-styles-wrapper .ico {
	min-height: 48px;
}

.editor-styles-wrapper .callbar {
	position: static;
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   Icon glyphs. Lucide strokes are used as CSS masks so they inherit colour;
   the Google mark keeps its four brand colours so it is a background image.
   Nothing here puts an SVG into post content.
   -------------------------------------------------------------------------- */

:root {
	--icon-house: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8' /%3E %3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z' /%3E %3C/svg%3E");
	--icon-droplets: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z' /%3E %3Cpath d='M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97' /%3E %3C/svg%3E");
	--icon-layers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z' /%3E %3Cpath d='M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12' /%3E %3Cpath d='M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17' /%3E %3C/svg%3E");
	--icon-building-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M10 12h4' /%3E %3Cpath d='M10 8h4' /%3E %3Cpath d='M14 21v-3a2 2 0 0 0-4 0v3' /%3E %3Cpath d='M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2' /%3E %3Cpath d='M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16' /%3E %3C/svg%3E");
	--icon-hard-hat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M10 10V5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5' /%3E %3Cpath d='M14 6a6 6 0 0 1 6 6v3' /%3E %3Cpath d='M4 15v-3a6 6 0 0 1 6-6' /%3E %3Crect x='2' y='15' width='20' height='4' rx='1' /%3E %3C/svg%3E");
	--icon-wrench: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z' /%3E %3C/svg%3E");
	--icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384' /%3E %3C/svg%3E");
	--icon-badge-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z' /%3E %3Cpath d='m9 12 2 2 4-4' /%3E %3C/svg%3E");
	--icon-sparkles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z' /%3E %3Cpath d='M20 2v4' /%3E %3Cpath d='M22 4h-4' /%3E %3Ccircle cx='4' cy='20' r='2' /%3E %3C/svg%3E");
	--icon-thumbs-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z' /%3E %3Cpath d='M7 10v12' /%3E %3C/svg%3E");
	--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M20 6 9 17l-5-5' /%3E %3C/svg%3E");
	--icon-shield-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z' /%3E %3Cpath d='m9 12 2 2 4-4' /%3E %3C/svg%3E");
	--icon-map-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0' /%3E %3Ccircle cx='12' cy='10' r='3' /%3E %3C/svg%3E");
	--icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z' /%3E %3C/svg%3E");
	--icon-file-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z' /%3E %3Cpath d='M14 2v5a1 1 0 0 0 1 1h5' /%3E %3Cpath d='M10 9H8' /%3E %3Cpath d='M16 13H8' /%3E %3Cpath d='M16 17H8' /%3E %3C/svg%3E");
	--icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='m9 18 6-6-6-6' /%3E %3C/svg%3E");
	--icon-facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06c0 5 3.66 9.15 8.44 9.94v-7.03H7.9v-2.91h2.54V9.85c0-2.52 1.5-3.91 3.77-3.91 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.78-1.63 1.57v1.89h2.78l-.45 2.91h-2.33V22c4.78-.79 8.44-4.94 8.44-9.94z'/%3E%3C/svg%3E");
	--icon-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.06 2.88 1.21 3.08c.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.69.62.71.23 1.36.19 1.87.12.57-.09 1.76-.72 2.01-1.41.25-.7.25-1.29.17-1.42-.07-.13-.27-.2-.57-.35z'/%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.46 1.32 4.96L2 22l5.25-1.38a9.87 9.87 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2zm0 18.13h-.01c-1.48 0-2.93-.4-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.36c0-4.54 3.7-8.24 8.25-8.24 2.2 0 4.27.86 5.83 2.42a8.19 8.19 0 0 1 2.41 5.83c0 4.54-3.7 8.21-8.23 8.21z'/%3E%3C/svg%3E");
	--google-g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%234285F4' d='M45.1 24.5c0-1.6-.1-2.7-.4-3.9H24v7.1h12.1c-.2 1.8-1.6 4.6-4.5 6.4l-.1.3 6.5 5 .5.1c4.1-3.8 6.6-9.4 6.6-15z'/%3E%3Cpath fill='%2334A853' d='M24 46c5.9 0 10.9-1.9 14.5-5.3l-6.9-5.3c-1.8 1.3-4.3 2.2-7.6 2.2-5.8 0-10.7-3.8-12.5-9.7l-.3.1-6.7 5.2-.1.2C7.9 41 15.4 46 24 46z'/%3E%3Cpath fill='%23FBBC05' d='M11.5 27.9c-.5-1.4-.8-2.9-.8-4.4s.3-3 .7-4.4v-.3L4.6 13.5l-.2.1C2.9 16.6 2 20.2 2 24s.9 7.4 2.4 10.4l7.1-6.5z'/%3E%3Cpath fill='%23EA4335' d='M24 10.3c4.1 0 6.9 1.8 8.5 3.3l6.2-6C34.9 4.1 29.9 2 24 2 15.4 2 7.9 7 4.4 13.6l7.1 5.5C13.3 14.1 18.2 10.3 24 10.3z'/%3E%3C/svg%3E");
}

.ico-house {
	--icon: var(--icon-house);
}

.ico-droplets {
	--icon: var(--icon-droplets);
}

.ico-layers {
	--icon: var(--icon-layers);
}

.ico-building-2 {
	--icon: var(--icon-building-2);
}

.ico-hard-hat {
	--icon: var(--icon-hard-hat);
}

.ico-wrench {
	--icon: var(--icon-wrench);
}

.ico-phone {
	--icon: var(--icon-phone);
}

.ico-badge-check {
	--icon: var(--icon-badge-check);
}

.ico-sparkles {
	--icon: var(--icon-sparkles);
}

.ico-thumbs-up {
	--icon: var(--icon-thumbs-up);
}

.ico-check {
	--icon: var(--icon-check);
}

.ico-shield-check {
	--icon: var(--icon-shield-check);
}

.ico-map-pin {
	--icon: var(--icon-map-pin);
}

.ico-star {
	--icon: var(--icon-star);
}

.ico-file-text {
	--icon: var(--icon-file-text);
}

.ico-chevron-right {
	--icon: var(--icon-chevron-right);
}