.breadcrumbs{margin-bottom:40px}.text-page__rich *:first-child{margin-top:0}.text-page__rich *:last-child{margin-bottom:0}.text-page__rich ul li:before{content:"";display:block;width:5px;height:5px;border-radius:50%;background:#5e5e5e;position:absolute;top:12px;left:11px}@media screen and (max-width:767px){.breadcrumbs{margin-bottom:32px}}@media screen and (min-width:992px){.text-page__rich a:hover{color:#bdbdbd}}

@media(max-width:767px){.breadcrumbs{margin-bottom:32px}}@media(min-width:991px){.blog__link:hover{transform:scale(1.02)}}ul li{list-style-type:none!important}

.breadcrumbs__item{height:max-content;display:flex;align-items:center}.breadcrumbs__text{color:#333!important}.breadcrumbs__item:after{content:"/"}.breadcrumbs__item:last-child:after{content:""}@media(min-width:992px){a.breadcrumbs__text:hover{color:#f37021}}

@media screen and (max-width: 1279px) {
	.nav,
	.nav__submenu {
		top: var(--kcg-header-h, 96px);
	}

	.nav__submenu {
		height: calc(100% - var(--kcg-header-h, 96px));
	}
}

.contact__form-wrapper .form > .wpcf7-spinner {
	grid-column: 1 / -1;
	margin: 0 auto;
}

.contact__form-wrapper .form:not(.submitting) > .wpcf7-spinner {
	display: none;
}

.contact__form-wrapper .form > .wpcf7-response-output {
	grid-column: 1 / -1;
}

@media screen and (max-width: 1279px) {
	.nav,
	.nav__submenu {
		height: calc(100vh - var(--kcg-header-h, 96px));
		height: calc(100dvh - var(--kcg-header-h, 96px));
		max-height: calc(100vh - var(--kcg-header-h, 96px));
		max-height: calc(100dvh - var(--kcg-header-h, 96px));
		overscroll-behavior: contain;
	}

	/* Both panels are scroll containers AND column flexboxes: a flex child may shrink
	   below its content, so the list overflows the item instead of the scroller and the
	   tail becomes unreachable. */
	.nav > *,
	.nav__submenu > * {
		flex-shrink: 0;
	}
}

.pagination__arrow .gallery__icon {
	flex: none;
	right: 3px;
}

.blog__item-title,
.blog__item-title-2,
.blog-content h2.blog__item-title,
.blog-content h3.blog__item-title-2 {
	margin-bottom: 16px;
}

.space-between__content > .services__item-btn {
	margin-top: 32px;
}

.calc__checkbox-wrapper input[type="checkbox"]:hover {
  border-color: #f37021;
}
.calc__checkbox-wrapper input[type="checkbox"]:checked {
  border-color: #f37021;
}
.calc__checkbox-wrapper input[type="checkbox"]:checked::before {
  transform: scale(1);
  opacity: 1;
}

@media screen and (max-width: 991px) {
	.why-choose__header .title-big.why-choose ~ p {
		text-align: center;
	}
}

.map {
	background-image: url("/wp-content/themes/kcg/assets/media/3f36cba286-650946cc0a4ea463a7e50ca0_Group_203094_20_1_.svg");
}

@media screen and (max-width: 1279px) {
	/* The panel's own CTA is z-index 6 over the submenu's 1 and is pinned at the panel
	   bottom, so submenu items scrolled under it and the tail looked unreachable. */
	.nav__submenu {
		padding-bottom: calc(var(--kcg-nav-cta-h, 184px) + 16px);
	}
}

@media screen and (min-width: 1280px) {
	.nav__submenu {
		box-shadow: 0 10px 24px -8px rgba(243, 112, 33, .38);
	}
}

/* Donor scrolls its table embed (.html-embed, max-width:479px); our about section
   renders that embed as .about-rich.w-richtext, so the rule never matched and the
   600px table pushed the document sideways. */
.about-rich.w-richtext:has(table) {
	overflow-x: auto;
}

/* Donor sets th{min-width:200px} only in the inline <style> of /kitchen-renovation-costs;
   the clone merged three pages into sections/0c440241.css, so the service pages' 3-column
   table was forced to 600px. Scoped back to the one page that owns it. */
body:not(.page-kitchen-renovation-costs) th {
	min-width: 0;
}

@media screen and (min-width: 1280px) {
	.nav__submenu {
		box-shadow: 0 6px 16px -6px rgba(243, 112, 33, .18);
	}
}

header.header {
	box-shadow: 0 6px 16px -6px rgba(243, 112, 33, .18);
}

/* Deliberate deviation: donor leaves the bio's in-text links classless, so they render
   browser-default blue. Owner asked for the site's .link-orange look; scoped to the
   author bio rich text so the .subtitle contact links stay untouched. */
.autor-biography .w-richtext a {
	color: var(--orange);
	text-decoration: underline;
	transition: color .4s;
}

.autor-biography .w-richtext a:hover {
	color: var(--hover);
}

@media screen and (max-width: 991px) {
	.autor-biography .w-richtext a:hover {
		color: var(--orange);
	}
}

/* Owner 2026-09-02: /reviews ends with the elfsight wall, which carries no bottom
   padding of its own, so the last row sat ~20px above the footer. The donor has the
   same gap; this deviates from it on purpose. */
.reviews {
	padding-bottom: 100px;
}

@media screen and (max-width: 991px) {
	.reviews {
		padding-bottom: 80px;
	}
}

@media screen and (max-width: 767px) {
	.reviews {
		padding-bottom: 50px;
	}
}

@media screen and (max-width: 1279px) {
	.nav__list,
	.nav__submenu-list {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: #f37021 #F6F3EC;
	}

	.nav__list::-webkit-scrollbar,
	.nav__submenu-list::-webkit-scrollbar {
		width: 12px;
	}

	.nav__list::-webkit-scrollbar-track,
	.nav__submenu-list::-webkit-scrollbar-track {
		background: #F6F3EC;
	}

	.nav__list::-webkit-scrollbar-thumb,
	.nav__submenu-list::-webkit-scrollbar-thumb {
		background-color: #f37021;
		border-radius: 16px;
	}

	.nav__list > *,
	.nav__submenu-list > * {
		flex-shrink: 0;
	}

	.nav,
	.nav__submenu {
		padding-bottom: 16px;
	}

	.nav > .btn.header__btn-mobile,
	.nav__submenu > .btn.header__btn-mobile {
		flex: 0 0 auto;
	}

	/* chrome-header.js clones this CTA into every .nav__submenu on the first burger click and
	   the donor sheet hides the copy; showing it lets each panel own its own bottom button. */
	.nav__submenu > .btn.header__btn-mobile {
		display: flex;
	}

	.nav > .btn.header__btn-mobile {
		z-index: 0;
	}
}

@media screen and (max-width: 1279px) and (max-height: 560px) {
	.nav,
	.nav__submenu {
		padding-top: 16px;
	}

	.nav {
		grid-row-gap: 16px;
		row-gap: 16px;
	}

	.nav__submenu-back,
	.nav__submenu-list {
		margin-bottom: 12px;
	}
}

.reviews__widget.is-hidden {
	display: none;
}

/* Owner 2026-09-03: the header shadow is a scroll state, not a permanent one —
   main.js puts .is-scrolled on <header> past a few pixels of scroll. */
header.header {
	box-shadow: none;
	transition: border-radius .4s, background-color .4s, box-shadow .4s;
}

header.header.is-scrolled {
	box-shadow: 0 6px 16px -6px rgba(243, 112, 33, .18);
}

/* Owner 2026-09-03: the floating elfsight badge. Window-fixed, 150px above the bottom
   edge — the donor's `sticky; top:100%` wrapper inside <main> scrolled away at the
   footer and never engaged on pages shorter than the screen. */
.kcg-elfsight-floating {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 150px;
	height: 0;
	z-index: 999;
	pointer-events: none;
}

.kcg-elfsight-floating > div {
	pointer-events: auto;
}

/* Owner 2026-09-03: the blog card is no longer one big <a> — image (rel=nofollow), title and
   author name are three separate links. Owner 2026-09-29: the hover is the donor's again, the
   whole card scales (main.css .article:hover), and the image fills the card's width. */
.blog__img-wrapper,
.blog__img-link > .blog-image {
	width: 100%;
}

.blog__img-link {
	display: inline-block;
	vertical-align: middle;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	border-radius: 32px;
	margin-bottom: 32px;
	text-decoration: none;
}

.blog__img-link > img {
	display: block;
	margin-bottom: 0;
}

.blog__item-img > .blog__img-link {
	width: 100%;
	height: 100%;
	border-radius: inherit;
	margin-bottom: 0;
}

.blog__title-link {
	color: inherit;
	text-decoration: none;
	transition: color .3s ease;
}

.blog__title-link:hover {
	color: var(--orange);
}

.blog__author-link {
	transition: color .3s ease;
}

.blog__author-link:hover {
	color: inherit;
	text-decoration: underline;
}

.blog-information .blog__author-link:hover {
	color: var(--main);
}

@media screen and (max-width: 767px) {
	.blog__img-link {
		border-radius: 24px;
	}

	.blog__img-wrapper > .blog__img-link {
		height: 100%;
		margin-bottom: 0;
		border-radius: 32px;
	}
}

@media screen and (max-width: 479px) {
	.blog__img-link {
		border-radius: 20px;
	}
}

.blog__author-link {
	text-decoration: none;
}

/* reviews wall (test page /reviews-test) — our own wall, elfsight balloon look */
.reviews-wall__sprite{position:absolute;width:0;height:0;overflow:hidden}
.reviews-wall__tab{-webkit-user-select:none;user-select:none}
.reviews-wall__tab.is-active{border-color:var(--orange);background-color:var(--orange);color:var(--white)}
.reviews-wall__grid{width:100%;column-count:3;column-gap:24px}
.reviews-wall__card{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;display:inline-block;width:100%;margin:0 0 28px}
.reviews-wall__card[hidden]{display:none}
.reviews-wall__bubble{position:relative;background-color:#fdf0e4;border-radius:16px;padding:20px 20px 22px}
.reviews-wall__bubble:after{content:"";position:absolute;left:26px;bottom:-13px;width:0;height:0;border-left:0 solid transparent;border-right:18px solid transparent;border-top:14px solid #fdf0e4}
.reviews-wall__stars{display:flex;gap:2px;margin-bottom:12px}
.reviews-wall__star{width:18px;height:18px;fill:var(--orange);flex:none}
.reviews-wall__text{color:var(--black);font-size:15px;line-height:160%;white-space:pre-line;overflow:hidden;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical}
.reviews-wall__card.is-expanded .reviews-wall__text{-webkit-line-clamp:unset;display:block;overflow:visible}
.reviews-wall__more{margin-top:8px;padding:0;border:0;background:none;color:var(--orange);font-size:15px;font-weight:600;cursor:pointer;text-decoration:underline}
.reviews-wall__more[hidden]{display:none}
.reviews-wall__author{display:flex;align-items:center;gap:12px;padding:20px 0 0 8px}
.reviews-wall__avatar{width:48px;height:48px;flex:none;border-radius:50%;object-fit:cover}
.reviews-wall__avatar--letter{display:flex;align-items:center;justify-content:center;background-color:var(--orange);color:var(--white);font-size:20px;font-weight:600}
.reviews-wall__meta{display:flex;flex-direction:column;min-width:0}
.reviews-wall__name{color:var(--black);font-size:16px;font-weight:600;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.reviews-wall__name:hover{color:var(--orange)}
.reviews-wall__date{color:var(--main);font-size:14px}
.reviews-wall__load{margin:16px auto 0;color:var(--white);min-width:200px;cursor:pointer;border:0}
.reviews-wall__load[hidden]{display:none}
.reviews-wall__load:hover{background-color:#d95f14}
@media screen and (max-width:991px){.reviews-wall__grid{column-count:2}}
@media screen and (max-width:767px){.reviews-wall__grid{column-count:1}}

@media screen and (max-width: 1279px) {
	/* The panel is pinned between the header and the viewport bottom instead of a
	   vh/dvh calc, so no unit mismatch can leave a gap under it. */
	.nav,
	.nav__submenu {
		bottom: 0;
		height: auto;
		max-height: none;
		max-width: 100%;
		overflow-x: hidden;
	}

	.nav__list,
	.nav__submenu-list {
		max-width: 100%;
		overflow-x: hidden;
	}

	.nav__list > .nav__item,
	.nav__item > .nav__trigger {
		max-width: 100%;
	}

	/* nav{text-wrap:nowrap} kept the longest item at its 363px max-content width, wider
	   than a 320-390px panel. */
	.nav__trigger > .nav__link,
	.nav__submenu-link {
		min-width: 0;
		white-space: normal;
		text-wrap: wrap;
		overflow-wrap: break-word;
	}

	.nav__trigger > .nav__square {
		flex: none;
	}

	.nav__submenu > .btn.header__btn-mobile {
		display: none;
	}

	.nav > .btn.header__btn-mobile {
		z-index: 6;
	}

	.nav__submenu-list {
		margin-bottom: 0;
	}

	.nav__submenu {
		padding-bottom: 88px;
	}
}

@media screen and (max-width: 374px) {
	.footer__social {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 8px;
	}

	.hero-badges__list {
		grid-template-columns: 1fr 1fr;
		max-width: 100%;
	}
}

/* Owner 2026-09-03: deliberate deviation from the donor on the 44 service-area FAQ bands
   (.faq-section.p200) — the source leaves the title in a 404px left box glued to the list,
   the button unwrapped, and 200px of dead space under it against 100px above. */
.faq-section.padding-100.p200.relative {
	padding-bottom: 100px;
}

@media screen and (max-width: 767px) {
	.faq-section.padding-100.p200.relative {
		padding-bottom: 50px;
	}
}

@media screen and (min-width: 992px) {
	.faq-section.p200 .faq__title._40px {
		max-width: none;
		text-align: center;
		margin-bottom: 40px;
	}
}

.faq-section.p200 .button-wrapper.faq {
	margin-top: 32px;
}

.faq-section.p200 .button-wrapper.faq .btn-opacity {
	margin-bottom: 0;
}

/* The .space-between__content > .services__item-btn deviation above was written for the
   plain photo+text band; the donor's slider band already spaces its first-row button with
   .rich-text-block.m30px, so the two stack into a 62px gap the donor does not have. */
.about-section.pt0 .space-between__content > .rich-text-block.m30px + .services__item-btn {
	margin-top: 0;
}

/* Owner 2026-09-03: /reviews-test hero parity with /reviews. The trail's separator and the
   marker reset live in page-scoped sheets keyed on '/reviews' (inc/content-assets.php), which
   the test page's path never loads — replicated here, scoped to the wall. */
.reviews-wall ul li{list-style-type:none}
.reviews-wall .breadcrumbs__item{height:max-content;display:flex;align-items:center}
.reviews-wall .breadcrumbs__text{color:#333}
.reviews-wall .breadcrumbs__item:after{content:"/"}
.reviews-wall .breadcrumbs__item:last-child:after{content:""}
@media screen and (min-width:992px){.reviews-wall a.breadcrumbs__text:hover{color:var(--orange)}}
@media screen and (max-width:767px){.reviews-wall .breadcrumbs{margin-bottom:32px}}
.reviews-wall__tabs{padding-left:0;list-style:none}
.reviews-wall__tab{padding-top:20px;padding-bottom:20px;list-style:none}
.reviews-wall__load{transition:background-color .4s,color .4s}
.reviews-wall__load:hover{background-color:var(--second);color:var(--black)}

/* Owner 2026-09-03: the sitewide floating rating badge, ours — the elfsight widget it
   replaces never rendered. z-index stays under the header's 10000000 so the open mobile
   menu covers it. */
.kcg-rating-badge {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 999;
	box-sizing: border-box;
	width: 200px;
	padding: 16px 16px 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #f2f2f2;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
	text-align: center;
	text-decoration: none;
	color: #1a1a1a;
	transition: box-shadow .3s, transform .3s;
}

.kcg-rating-badge:hover {
	box-shadow: 0 8px 22px rgba(0, 0, 0, .2);
	transform: translateY(-2px);
}

.kcg-rating-badge__logo {
	display: block;
	width: 30px;
	height: 30px;
	margin-bottom: 8px;
}

.kcg-rating-badge__logo svg {
	display: block;
	width: 100%;
	height: 100%;
}

.kcg-rating-badge__label {
	display: block;
	font-size: 13px;
	line-height: 1.2;
	color: #5f6368;
	margin-bottom: 6px;
}

.kcg-rating-badge__score {
	display: block;
	font-size: 28px;
	line-height: 1.1;
	font-weight: 700;
	color: #1a1a1a;
	margin-bottom: 6px;
}

.kcg-rating-badge__stars {
	display: flex;
	justify-content: center;
	gap: 2px;
	margin-bottom: 8px;
}

.kcg-rating-badge__star {
	display: block;
	width: 16px;
	height: 16px;
	fill: #fbbc04;
}

.kcg-rating-badge__count {
	display: block;
	font-size: 12px;
	line-height: 1.2;
	color: #70757a;
}

@media screen and (max-width: 767px) {
	.kcg-rating-badge {
		left: 12px;
		bottom: 12px;
		width: 132px;
		padding: 10px 10px 12px;
		border-radius: 10px;
	}

	.kcg-rating-badge__logo {
		width: 22px;
		height: 22px;
		margin-bottom: 5px;
	}

	.kcg-rating-badge__label {
		font-size: 11px;
		margin-bottom: 3px;
	}

	.kcg-rating-badge__score {
		font-size: 20px;
		margin-bottom: 3px;
	}

	.kcg-rating-badge__stars {
		margin-bottom: 5px;
	}

	.kcg-rating-badge__star {
		width: 13px;
		height: 13px;
	}

	.kcg-rating-badge__count {
		font-size: 10px;
	}
}

body.page-template-page-reviews-wall #main {
	padding-top: var(--kcg-header-h, 128px);
}

@media screen and (max-width: 374px) {
	.tiktok-embed {
		min-width: 0;
		max-width: 100%;
	}
}

@media screen and (max-width: 374px) {
	.tiktok-embed {
		min-width: 0 !important;
		max-width: 100% !important;
	}

	.blog-content table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}
}

.gallery__bg {
	background-image: url("/wp-content/themes/kcg/assets/media/5be815f23c-651407ae47debe1044b074e9_Group_20_4_.svg");
}

.sticky-cta {
	background-image: url("/wp-content/themes/kcg/assets/media/4d2c814907-458be9cdd5c85f3fd_Mask_20group_20_1_.svg");
}

/* Owner 2026-09-03: the floating rating badge is the elfsight app again, inserted the same
   way the working /reviews walls are — server-side container with data-elfsight-app-lazy,
   platform.js after it. Only this outer wrapper is fixed; the widget container carries no
   size or position of ours. The card inside is the fallback (assets/js/main.js). */
.kcg-float-badge {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 999;
	min-width: 200px;
}

.kcg-float-badge .kcg-rating-badge {
	position: static;
	left: auto;
	bottom: auto;
	display: none;
}

.kcg-float-badge.is-fallback .kcg-rating-badge {
	display: flex;
}

@media screen and (max-width: 767px) {
	.kcg-float-badge {
		left: 12px;
		bottom: 12px;
		min-width: 132px;
	}
}

/* Owner 2026-09-03: the wall moved onto /reviews. There the donor's 59fb9343.css makes
   .header sticky (in flow), so the header-height offset on #main is double-counted and
   must stay only on /reviews-test, where the header is fixed. The gap under the header
   now comes from the section and matches .padding-100 on /blogs and /contact-us. */
body.page-template-page-reviews-wall #main {
	padding-top: 0;
}

body.page-template-page-reviews-wall.page-reviews-test #main {
	padding-top: var(--kcg-header-h, 128px);
}

.reviews-wall {
	padding-top: 100px;
}

@media screen and (max-width: 991px) {
	.reviews-wall {
		padding-top: 80px;
	}
}

@media screen and (max-width: 767px) {
	.reviews-wall {
		padding-top: 50px;
	}
}

@media screen and (min-width: 1280px) {
	body.page-template-page-reviews-wall #main.main {
		padding-top: 32px;
	}
}

/* Owner 2026-09-03: donor parity for the gap above the trail on /reviews — the donor gives
   this page nothing but .main{padding-top:32px} (>=1280px) and no section padding, because
   59fb9343.css makes .header sticky there, so it already holds its own place in the flow.
   The section padding above was a second compensation on top of it. */
.reviews-wall {
	padding-top: 0;
}

body.page-template-page-reviews-wall.page-reviews-test #main {
	padding-top: 0;
}

/* CF7 prints .wpcf7-response-output as a direct child of <form>, and both donor forms lay their
   children out (form 202 = .form grid 1fr 1fr, form 201 = .form-wrapper flex row), so the message
   became a column next to the fields. */
.wpcf7 form.wpcf7-form > .wpcf7-response-output {
	grid-column: 1 / -1;
	box-sizing: border-box;
	width: 100%;
	margin: 24px 0 0;
	padding: 14px 20px;
	border: 1px solid var(--hover, #bdbdbd);
	border-radius: 16px;
	background-color: var(--white, #fff);
	color: var(--black, #151515);
	font-family: Manrope, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	text-align: left;
	overflow-wrap: anywhere;
}

/* main.js sets aria-busy while a submission is in flight: no click reaches the form until it ends. */
.wpcf7 form.wpcf7-form[aria-busy="true"] {
	pointer-events: none;
}

.wpcf7 form.wpcf7-form.validating > .wpcf7-response-output,
.wpcf7 form.wpcf7-form > .wpcf7-response-output:empty {
	display: none;
}

.wpcf7 form.wpcf7-form.sent > .wpcf7-response-output {
	border-color: #2f8f4e;
	background-color: #eff7f1;
	color: #1e6b3a;
}

.wpcf7 form.wpcf7-form.invalid > .wpcf7-response-output,
.wpcf7 form.wpcf7-form.unaccepted > .wpcf7-response-output,
.wpcf7 form.wpcf7-form.payment-required > .wpcf7-response-output {
	border-color: var(--orange, #f37021);
	background-color: #fdf3ec;
	color: #a34a12;
}

.wpcf7 form.wpcf7-form.failed > .wpcf7-response-output,
.wpcf7 form.wpcf7-form.aborted > .wpcf7-response-output,
.wpcf7 form.wpcf7-form.spam > .wpcf7-response-output {
	border-color: #c8382f;
	background-color: #fbeeed;
	color: #8f2820;
}

/* .form-wrapper is a nowrap flex row whose two children already shrink to their floors: wrapping
   is enabled with their sizes pinned to what they resolve to today, so only the message breaks
   to a new line. Below 992px the donor turns the row into a column — no basis meddling there. */
@media screen and (min-width: 992px) {
	.wpcf7 form.wpcf7-form.form-wrapper {
		flex-wrap: wrap;
	}

	.wpcf7 form.wpcf7-form.form-wrapper > .form-services,
	.wpcf7 form.wpcf7-form.form-wrapper > .form.estimate-form {
		flex: 1 1 0;
	}

	.wpcf7 form.wpcf7-form.form-wrapper > .wpcf7-response-output {
		flex: 0 0 100%;
	}
}

.wpcf7 .wpcf7-form .wpcf7-not-valid-tip {
	grid-column: 1 / -1;
	margin-top: 6px;
	padding-left: 2px;
	color: #c8382f;
	font-family: Manrope, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

.wpcf7 .wpcf7-form .form__input.wpcf7-not-valid {
	border-color: #c8382f;
}

/* The spinner is injected next to the submit, which sits in a grid in both forms; the earlier
   rule keyed .submitting on .form, but on form 201 that class lands on the <form> above it. */
.wpcf7 .wpcf7-form .wpcf7-spinner {
	grid-column: 1 / -1;
	display: none;
	margin: 8px auto 0;
}

.wpcf7 .wpcf7-form.submitting .wpcf7-spinner {
	display: block;
	visibility: visible;
}

/* Since the submit moved into the .form__btn wrapper the spinner is a flex item beside it, and it
   narrowed the input and grew the button while a submission ran: it sits over the wrapper's edge. */
.wpcf7 .wpcf7-form .form__btn {
	position: relative;
}

.wpcf7 .wpcf7-form .form__btn > .wpcf7-spinner {
	position: absolute;
	top: 50%;
	right: 16px;
	margin: 0;
	transform: translateY(-50%);
}

/* Owner 2026-09-04: /thank-you pairs the orange hero button with the outlined one in
   .buttons-flex. .btn.hero__btn-orange carries margin-bottom:40px, so flex stretch makes the
   sibling 40px taller, and .btn-opacity has no width of its own — the donor's own
   .hero__btn-opacity sizing, page-scoped so the home hero keeps the donor geometry. */
body.page-thank-you .hero-blog .buttons-flex {
	align-items: flex-start;
}

body.page-thank-you .hero-blog .buttons-flex .btn-opacity {
	width: 100%;
	max-width: 237px;
}

/* Owner 2026-09-04: width:100% above resolved against a shrink-to-fit .buttons-flex, so it
   gave the content width, not 237px. Sizing now copies the orange button's own mechanism
   (min-width), and the 40px that .btn.hero__btn-orange carried moves to the row so stretch
   can equalise both heights without losing the gap under it. */
body.page-thank-you .hero-blog .buttons-flex {
	align-items: stretch;
	margin-bottom: 40px;
}

body.page-thank-you .hero-blog .buttons-flex .btn.hero__btn-orange {
	margin-bottom: 0;
}

body.page-thank-you .hero-blog .buttons-flex .btn-opacity {
	width: auto;
	min-width: 237px;
	max-width: none;
}

/* Owner 2026-09-04: /thank-you is now the `feature` band (photo + rich text) on the cream
   second background — the .hero-blog deviations above no longer match, the page has no hero
   row. The band pays the fixed header's offset itself: this page lost the breadcrumb strip
   that used to hold every inner page clear of the header. */
body.page-thank-you .about-section {
	background-color: var(--second);
	padding-top: 228px;
	padding-bottom: 100px;
}

body.page-thank-you .space-between {
	margin-bottom: 0;
}

body.page-thank-you .space-between__image {
	max-width: 636px;
	height: 630px;
}

body.page-thank-you .rich-text-block-4 h1 {
	max-width: none;
	margin: 0 0 16px;
	color: var(--black);
	text-align: left;
	font-size: 48px;
}

body.page-thank-you .rich-text-block-4 p {
	margin-bottom: 0;
}

@media screen and (min-width: 992px) {
	body.page-thank-you .space-between {
		align-items: center;
	}
}

@media screen and (max-width: 1279px) {
	body.page-thank-you .about-section {
		padding-top: 181px;
		padding-bottom: 80px;
	}
}

@media screen and (max-width: 991px) {
	body.page-thank-you .space-between__image {
		max-width: 100%;
	}

	body.page-thank-you .space-between__content {
		margin-bottom: 0;
	}

	body.page-thank-you .rich-text-block-4 h1 {
		font-size: 32px;
	}
}

@media screen and (max-width: 767px) {
	body.page-thank-you .space-between__image {
		height: 400px;
	}
}

@media screen and (max-width: 479px) {
	body.page-thank-you .about-section {
		padding-top: 161px;
		padding-bottom: 50px;
	}
}

/* Owner 2026-09-04: the header offset above lost at <=991 — the donor's own
   .section.about-section.pb0 (three classes) outranks body.page-thank-you .about-section and
   put back 32px padding + 32px margin. Re-stated on the band's full class list, and the row
   is packed from the left so the text sits 50px off the photo instead of at the far edge. */
body.page-thank-you .section.about-section.pb0.m-100 {
	margin-top: 0;
	padding-top: 228px;
	padding-bottom: 100px;
}

@media screen and (min-width: 992px) {
	body.page-thank-you .space-between {
		justify-content: flex-start;
		column-gap: 50px;
	}
}

@media screen and (max-width: 1279px) {
	body.page-thank-you .section.about-section.pb0.m-100 {
		padding-top: 181px;
		padding-bottom: 80px;
	}
}

@media screen and (max-width: 479px) {
	body.page-thank-you .section.about-section.pb0.m-100 {
		padding-top: 161px;
		padding-bottom: 50px;
	}
}

/* Owner checklist 2026-09-11: tap targets in the mobile panel measured 36px (top level)
   and 22px (submenu links) against a 40px floor. The boxes grow, the list gaps shrink by
   the same amount, so item pitch and panel height stay where the donor put them. */
@media screen and (max-width: 1279px) {
	.nav__list {
		grid-row-gap: 8px;
		row-gap: 8px;
	}

	.nav__list > .nav__item > .nav__trigger {
		min-height: 44px;
		align-items: center;
		cursor: pointer;
	}

	.nav__trigger > .nav__link {
		display: flex;
		align-items: center;
		align-self: stretch;
	}

	.nav__submenu-list {
		grid-row-gap: 4px;
		row-gap: 4px;
	}

	.nav__submenu-link {
		display: flex;
		align-items: center;
		min-height: 40px;
	}

	.nav__submenu-back {
		cursor: pointer;
	}
}

/* ADA 2026-09-11: main.css zeroes the focus ring on Webflow controls
   (.w-input:focus, .w-select:focus, .w-dropdown-*, slider arrows/dots) — the form
   fields had no visible keyboard focus at all (WCAG 2.4.7). Outline takes no layout
   space, so boxes stay where they are. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.w-input:focus-visible,
.w-select:focus-visible,
.w-dropdown-toggle:focus-visible,
.w-dropdown-link:focus-visible,
.w-slider-dot:focus-visible,
.w-slider-arrow-left:focus-visible,
.w-slider-arrow-right:focus-visible,
.button-white-to-orange:focus-visible {
	outline: 2px solid #1a1a1a;
	outline-offset: 2px;
}

/* ADA 2026-09-11: skip-link (first child of <body>, off-screen until focused), the
   visually-hidden helper the JS-inserted <caption> uses, and the fallback that hides the
   closed mobile panel from Tab where `inert` is unsupported — main.js sets .kcg-no-inert
   and [data-kcg-shut], and visibility joins the transition so opening still animates. */
.kcg-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 12px 20px;
	background: #fff;
	color: #1a1a1a;
	font-size: 16px;
	line-height: 1.2;
	text-decoration: underline;
	border: 2px solid #1a1a1a;
	border-radius: 0 0 8px 0;
}

.kcg-skip-link:focus {
	left: 0;
}

main[tabindex="-1"]:focus {
	outline: none;
}

.kcg-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media screen and (max-width: 1279px) {
	.kcg-no-inert .nav {
		transition: opacity .4s, transform .4s, visibility .4s;
	}

	.kcg-no-inert .nav[data-kcg-shut] {
		visibility: hidden;
	}
}

/* ADA 2026-09-11: WCAG 2.3.3 — no reduced-motion rule existed. Durations only: ix2 starts its
   elements at inline opacity:0 and finishes them in JS, so `animation: none` would leave whole
   sections invisible for good. Verified on / and /gallery: 0 extra elements below opacity .1. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto !important;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-delay: -.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}
}

/* Owner 2026-09-11: the donor's upload row is a 22px text line; ADA needs a 44px target. */
.form__upload {
	min-height: 44px;
	align-items: center;
	cursor: pointer;
}

/* ADA 2026-09-11: the hub items of the header menu are bare <div class="nav__link"> — main.js
   makes them disclosure buttons, so the open state needs the same rules chrome-header.css gives
   :hover, and the two new keyboard targets need a focus ring main.css never drew. */
.nav__trigger > .nav__link[role="button"]:focus-visible,
.form__upload:focus-visible {
	outline: 2px solid #1a1a1a;
	outline-offset: 2px;
}

@media screen and (min-width: 1280px) {
	.nav__item.kcg-sub-open .nav__submenu {
		pointer-events: auto;
		opacity: 1;
		transform: translateY(100%);
	}

	.nav__item.kcg-sub-open > .nav__trigger > .nav__square {
		transform: rotate(-135deg);
	}
}

/* [vis] 2026-09-22: the 48px field with padding 21/6 leaves 19px for the value — the native
   select (shown until nice-select lazy-inits) clips its option text at 18px, and nice-select's
   21px line box runs 2px under the floated label. 22/4 + 20px line fits both states under it. */
.form .form__select,
.form select.form__select {
	padding-top: 22px;
	padding-bottom: 4px;
	font-size: 14px;
	line-height: 20px;
}

.form .form__select .current {
	line-height: 20px;
}

/* WebKit's native menulist adds inner padding of its own and ignores line-height, so the 20px
   left for the value above still clipped "Select one…" in Safari. Without the native look the
   box is the padding alone; the arrow it drew is redrawn here. */
.form select.form__select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23151515'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 10px 6px;
}

/* [vis] 2026-09-22: the fixed header clears the estimate H1 only at <=479px (donor's own
   40px margin) and at >=1280px (.main padding-top). Between them the title sat 1-21px under
   the header. Same 40px, for the range the donor left out. */
@media screen and (min-width: 480px) and (max-width: 1279px) {
	.estimate-title {
		margin-top: 40px;
	}
}

/* Owner 2026-09-22: the donor pins the reviews arrows left at <=479px; the owner wants them
   centred, like the gallery pagination already is below 768. */
@media screen and (max-width: 767px) {
	.pagination.pagination__black {
		justify-content: center;
	}
}

/* Owner 2026-09-22: the author/date row followed the description in block flow, so a shorter
   title lifted it above its row neighbours. The grid already stretches the item; the article
   now carries that height and the row sits on the bottom edge. */
.blog__item {
	height: 100%;
}

.blog__article {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.blog__item-info {
	margin-top: auto;
}

/* QA 2026-09-29: the same on the related-articles cards (/about-us and the other feeds). */
.blogs-item,
.blogs-item .article-link {
	height: 100%;
}

.blogs-item .article-link {
	display: block;
}

.blogs-item .article {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.blogs-item .blog-information {
	margin-top: auto;
}

/* 2026-10-05 (B-53, variant B): the brand orange stays the fill, but white or cream text on it
   reads 2.94:1 and 2.65:1, under AA's 4.5. Text on an orange fill is #151515 (6.22:1): every .btn
   but the transparent hero one, and each other orange fill that carries text, at rest and on
   hover. This replaces the near-transparent layer of 2026-09-23, which only hid the pair from
   checkers. .btn__label, the div that layer sat on, inherits the button's colour. */
.btn:not(.hero__btn-transparent),
.btn:not(.hero__btn-transparent):hover,
.btn-2,
.btn-2:hover,
.btn-3,
.btn-3:hover,
.btn-4,
.btn-4:hover,
.btn.steps__button.mw,
.btn.cta__btn.cta__btn--ppc-modificator,
.btn-opacity.btn-opacity__black:hover,
.btn-opacity-2.btn-opacity__black:hover,
.btn-opacity.btn-opacity__black.choose__btn.ppc-modificator,
.btn-opacity:where(.w-variant-c0e08c85-0438-be42-88a9-b79c4e94610f),
.call-us__button,
.gallery__trigger.btn-reset,
.header-top__banner-text,
.quiz__option-list-item:hover,
.reviews__tab-item:hover,
.reviews-wall__tab.is-active,
.reviews-wall__avatar--letter,
.reviews-wall__load {
	color: #151515;
}

/* The orange as TEXT reads 2.94:1 on white and 2.65:1 on cream; #b84b0a, the same hue darker,
   reads 5.19 and 4.68. The dark grounds (#342f28: the footer, the .cta block) keep the brand
   orange, which reads 4.52:1 there and 2.56 darkened. Links in prose are the classless ones, so
   a button inside stays a button. */
:is(
	.nav__submenu-link.orange,
	.nav__submenu-link:hover,
	.header__number,
	.link-orange,
	.link-orange:hover,
	.link-orange-2,
	.link-orange-2:hover,
	.orange-text,
	.steps__number,
	.number-marker,
	.blog__item-text.blog__item-text__orange,
	.hero__subtitle.read,
	.gallery__sub-link.active,
	.gallery__sub-link:hover,
	.voucher__holiday-name,
	.dropdown-wrapper button,
	.reviews-wall__more,
	a.reviews-wall__name:hover,
	.testimonials__link:hover,
	.service-area__link.link_underlined:hover,
	.w-richtext a:not([class]),
	.estimate-description a:not([class]),
	.process-item__text a:not([class]),
	.hero__desc a:not([class]),
	.mb40px a:not([class])
):not(.footer *, .cta *) {
	color: #b84b0a;
}

/* QA 2026-10-02: the same layer on the /kitchen-renovation-costs hero text — white on the photo,
   which only covers the left half, so a checker measures it against the beige section. */
.new-breadcrumbs--calculator .breadcrumb-item,
.calc-hero__h1,
.calc-hero__p {
	background-color: #ffffff03;
}
/* Owner 2026-09-23: the submit input is now transparent inside the orange wrapper — the wrapper
   keeps .btn/.form__btn, so padding, radius and border are unchanged. */
.form__btn-native {
	background-color: transparent;
	color: inherit;
	font: inherit;
	width: 100%;
	border: 0;
	padding: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* Owner 2026-09-23: the Elfsight badge counter is light DOM, so our sheet reaches it; their
   styled-components rule loads after ours, hence the flag. Black on the white card reads 17:1. */
.es-badge-reviews-count {
	color: #151515 !important;
}

/* QA 2026-10-02: the calculator's +/− were the 7px chevrons themselves; a tap target needs 24px.
   Each button now takes half of the 48px input, the chevron is drawn by ::before at its old spot. */
.calc-hero__number {
	position: relative;
}

.calc-hero__number .calc-hero__number-plus,
.calc-hero__number .calc-hero__number-minus {
	top: 0;
	right: 6px;
	bottom: auto;
	width: 24px;
	height: 24px;
	border: 0;
	background-color: transparent;
	transform: none;
	cursor: pointer;
}

.calc-hero__number .calc-hero__number-minus {
	top: 24px;
}

.calc-hero__number .calc-hero__number-plus::before,
.calc-hero__number .calc-hero__number-minus::before {
	content: "";
	position: absolute;
	left: 50%;
	box-sizing: border-box;
	width: 7px;
	height: 7px;
	border-right: 2px solid #999;
	border-bottom: 2px solid #999;
	transition: border-color 0.5s ease;
}

.calc-hero__number .calc-hero__number-plus::before {
	top: 19.25px;
	transform: translate(-50%, -50%) rotate(225deg);
}

.calc-hero__number .calc-hero__number-minus::before {
	top: 3px;
	transform: translate(-50%, -50%) rotate(45deg);
}

.calc-hero__number .calc-hero__number-plus:hover::before,
.calc-hero__number .calc-hero__number-minus:hover::before {
	border-color: #f37021;
}

/* QA 2026-10-02: the home hero's compact badge sits on the dark photo, where black read 2.8:1. */
.hero .es-badge-reviews-count {
	color: #fff !important;
}

/* Owner 2026-09-29: a label that wraps stays centred on the service-area pages. */
.single-location .btn-opacity-2.btn-opacity__black.services__item-btn,
.single-location .solution-card .btn-opacity.btn-opacity__black.services__item-btn {
	text-align: center;
}

/* Owner 2026-10-02: Before/After on the project pages. Two 267px cards and the 24px gap need
   558px; a narrower column (tablet, phone) cut the second photo and left swiper a few pixels to
   scroll, so the arrows looked dead. A card shrinks until two fit whole; a gallery of more
   photos still slides, one whole card per step. */
.proj-swiper .proj-swiper-slide.swiper-slide {
	width: min(267px, calc((100% - 24px) / 2));
}

.proj-swiper .proj-card {
	width: 100%;
}

/* QA 2026-10-05: the photo popup opened under the fixed header (z-index 10000000). */
.gallery-popup.gallery-popup__open {
	z-index: 10000001;
}