.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}}

.hero-badges__item:last-child .hero-badges-item__logo-wrap,.hero-badges-item__logos .hero-badges-item__logo-wrap{margin-bottom:0}@media screen and (min-width:1280px){a .hero-badges-item__logo{transition:transform .3s ease-out}a:hover .hero-badges-item__logo{transform:scale(1.1)}}

.video{width:100%;height:100%;position:absolute;top:0;left:0}.video__btn:before{content:"";display:block;width:10px;height:12px;background:#fff;clip-path:polygon(0% 0%,0% 100%,100% 50%)}

.cart-list__item:before{content:"";display:block;width:5px;height:5px;background:#5e5e5e;border-radius:50%;position:absolute;top:12px;left:10px}

.ppc-cta__p a{text-decoration:none;color:inherit}.ppc-cta-container{color:#f6f3ec}.ppc-cta__list-item:before{content:url(/wp-content/themes/kcg/assets/media/1039c8f64e-72e0108b1f35afa9ce70b64_Frame_204145.svg);position:absolute;left:-32px;top:0;height:24px;width:24px}

.gallery__show path{fill:#342f28;transition:fill .4s}.gallery-popup__pagination{pointer-events:none}.gallery-popup__pagination__arrow{pointer-events:auto}.gallery-popup{pointer-events:none}.gallery-popup__open{opacity:1;pointer-events:auto;z-index:9999}.gallery-popup__img{object-fit:cover}.gallery-popup__slide{border-radius:32px;overflow:hidden}.gallery-popup__cross-lock{overflow:hidden}.gallery-popup__cross:before,.gallery-popup__cross:after{content:"";display:block;width:16px;height:1px;background:#fff;position:absolute}.gallery-popup__cross:before{transform:rotate(45deg)}.gallery-popup__cross:after{transform:rotate(-45deg)}@media screen and (max-width:767px){.gallery-popup__slide{border-radius:16px;overflow:hidden}}@media screen and (min-width:991px){.gallery__show:hover path{fill:#f37021}}

.gallery-popup.gallery-popup__open .img-cover.first,.gallery-popup.gallery-popup__open .img-cover.opened-center{object-position:0 30%}.gallery-popup.gallery-popup__open .img-cover.third{object-position:0 20%!important}.gallery__search-icon.w-embed{margin-top:0}

.testimonials__arrow.swiper-button-disabled{opacity:.4}

.footer:before{position:absolute;z-index:-1;top:0;bottom:0;width:100%;height:100px;content:"";transform:translateY(-100%);background:#342f28}.form__select{position:static;display:flex;align-items:center;width:100%;height:48px;padding:21px 16px 6px;transition:border-color .4s,border-radius .4s;border:1px solid #d9d9d9;border-radius:16px;background:#fff}.form__select:after{right:16px;border-color:#5e5e5e}.form__select ul{display:flex;flex-direction:column;width:100%;max-height:200px;margin:0!important;padding:16px!important;border:1px solid #d9d9d9;border-top:transparent!important;border-radius:0 0 16px 16px!important;box-shadow:none!important;row-gap:8px}.nice-select.form__select.open,.form__select:hover{border:1px solid #d9d9d9}.nice-select.form__select.open{border-bottom:transparent;border-radius:16px 16px 0 0}.form__select ul::-webkit-scrollbar{width:12px}.form__select ul::-webkit-scrollbar-track{background:#bdbdbd}.form__select ul::-webkit-scrollbar-thumb{border-radius:16px;background-color:#f37021}.form__select{scrollbar-width:thin;scrollbar-color:#bdbdbd #f37021}.form__select ul li:first-child{display:none}.form .form__select ul li{font-size:16px;font-weight:500;line-height:150%;min-height:0;padding:0;color:#5e5e5e}.form__select .current{font-size:14px;font-weight:500;line-height:150%;color:#151515}.form__load-btn path{transition:stroke .4s}.form__load-btn:hover path{stroke:#bdbdbd}.form__textarea{resize:none}.form__label{pointer-events:none}.form__input:not(:placeholder-shown)+.form__label,.form__input:focus+.form__label,.move-label .form__label{font-size:10px;font-weight:700;line-height:150%;top:8px;letter-spacing:.2px;text-transform:uppercase;pointer-events:auto}.form__input:not(:placeholder-shown,.form__select),.move-label .form__select{border:1px solid #5e5e5e}.form__input:focus{border:1px solid #d9d9d9}.error{border:1px solid #d73333!important}.error+.form__label{color:#d73333!important}.files{display:flex;flex-wrap:wrap;margin-top:8px;list-style-type:none;row-gap:8px;column-gap:8px}.files__item{position:relative;padding:16px 24px;border-radius:32px;background:#fff}.files__cross{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px;cursor:pointer;border-radius:50%;background:#f37021}.files__cross:before,.files__cross:after{position:absolute;width:60%;height:1px;content:"";background:#fff}.files__cross:before{transform:rotate(45deg)}.files__cross:after{transform:rotate(-45deg)}.files__text{font-size:14px;line-height:150%;word-break:break-all}@media screen and (max-width:479px){.g-recaptcha{overflow:hidden}.g-recaptcha>div{transform:scale(.89);transform-origin:left}}#zip{-moz-appearance:textfield;-webkit-appearance:none}#zip::-webkit-outer-spin-button,#zip::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}

.service-icon{border-radius:100%!important}

#line1,#line2,#line3,#door,#handler,#star1,#star2,#evond,#hole1,#hole2,#hole,#hole3,#heart-background,#heart,#rect,#question,#question-dot,#question-background,#door2{transition:transform .5s,fill .4s,opacity .2s}.service-wrapper:hover #line1,.service-wrapper:hover #line2,.service-wrapper:hover #line3,.service-wrapper.activated #line1,.service-wrapper.activated #line2,.service-wrapper.activated #line3,.service-wrapper:hover #door,.service-wrapper.activated #door,.service-wrapper:hover #door2,.service-wrapper.activated #door2{opacity:0}.service-wrapper:hover #handler,.service-wrapper.activated #handler{fill:#f37021}#star1,#star2,#evond{opacity:0}.service-wrapper:hover #star1,.service-wrapper:hover #star2,.service-wrapper:hover #evond,.service-wrapper.activated #star1,.service-wrapper.activated #star2,.service-wrapper.activated #evond{opacity:1}.service-wrapper:hover #star1,.service-wrapper:hover #star2,.service-wrapper.activated #star1,.service-wrapper.activated #star2{animation:flyingLoop 1s .6s infinite alternate}@keyframes flyingLoop{0%{transform:scale(1)}to{transform:scale(1.05)}}.service-wrapper:hover #hole,.service-wrapper:hover #hole1,.service-wrapper #hole3,.service-wrapper #hole2,.service-wrapper.activated #hole,.service-wrapper.activated #hole1,.service-wrapper:hover #heart,.service-wrapper:hover #heart2,.service-wrapper.activated #heart,.service-wrapper.activated #heart2{opacity:0}.service-wrapper:hover #heart-background,.service-wrapper:hover #rect,.service-wrapper.activated #heart-background,.service-wrapper.activated #rect{transition:fill .5s,stroke .3s}.service-wrapper:hover #heart-background,.service-wrapper:hover #rect,.service-wrapper.activated #heart-background,.service-wrapper.activated #rect{fill:#fff}#heart-background,#rect{stroke:#f37021;stroke-width:2px}#rect{transform:translateY(-2px)}.service-wrapper:hover #question,.service-wrapper:hover #question-dot,.service-wrapper.activated #question,.service-wrapper.activated #question-dot{fill:#f37021}.service-wrapper:hover #question-background,.service-wrapper.activated #question-background{opacity:0}.form-services.error{border:none!important}.form-services.error .service-wrapper{border:2px solid red}.service-wrapper.activated{border:2px solid #f37021!important}input[type=checkbox]{appearance:none;background-color:#fff;border-radius:4px;border:1px solid #d9d9d9;width:24px;height:24px;transition:border-color .5s ease;margin-right:12px;position:relative;margin-top:0}.form__field-checkbox *{cursor:pointer}input[type=checkbox]:before{content:url(/wp-content/themes/kcg/assets/media/610d984c45-673749a3a6126ea58e4125b2_Vector_204.svg);transform:scale(0);opacity:0;transition:.12s transform ease-in-out,.12s opacity ease-in-out;top:2px;left:3px;position:absolute}input[type=checkbox]:checked{border-color:#f37021}input[type=checkbox]:checked:before{transform:scale(1);opacity:1}input[type=checkbox]:hover{border-color:#f37021}.w-checkbox{margin-bottom:0}form .form__field-textarea:has(#contact_method){display:none}

@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; the .sticky-cta
   picture) keep the brand orange, which reads 4.52:1 on #342f28 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 *, .sticky-cta *) {
	color: #b84b0a;
}

/* 2026-10-05: on the inner pages' hero the donor's #0006 filter left white text at 3.0-4.4:1 on
   the lighter photos (pixels measured under the breadcrumbs, the subtitle and the outline button).
   A second .25 layer reaches 4.5 with margin; on a desktop it covers only the text's side, so the
   right of the photo keeps the donor's shade. The home and calculator heroes already pass. */
.hero__bg-filter.new {
	background-image: linear-gradient(#00000040, #00000040);
}

@media screen and (min-width: 992px) {
	.hero__bg-filter.new {
		background-image: linear-gradient(90deg, #00000040 0%, #00000040 62%, #0000 85%);
	}

	/* An article's author and date run to 75% of the width, where .25 left them at 3.95-4.34. */
	.single-post .hero__bg-filter.new {
		background-image: linear-gradient(90deg, #0000004d 0%, #0000004d 80%, #0000 95%);
	}
}

/* 2026-10-05: the calculator's area hint was #d3d3d3, 1.5:1 on white; #767676 reads 4.54 and stays
   lighter than a typed value (#5e5e5e). */
.calc-hero__input::placeholder {
	color: #767676;
}

/* 2026-10-05: the sticky CTA's phone, orange on its dark picture, read 2.2-3.2:1. It takes the
   cream of the text around it, with an underline so it still reads as a link. */
.sticky-cta :is(.link-orange, .link-orange-2),
.sticky-cta :is(.link-orange, .link-orange-2):hover {
	color: #f6f3ec;
	text-decoration: underline;
}

/* 2026-10-05: light text on a photo had only the cream page under it, 1.11:1 until the photo loads
   (and in a checker, which does not see the photo). The dark fallback sits under the photo, so
   nothing changes once it paints. The calculator's photo covers only the left column and stops
   4-10px short of the content's right edge at 992-1366, inside its 20px padding: content-box. */
.hero-blog:has(> .hero__bg),
.sticky-cta {
	background-color: #342f28;
}

.calc-hero__content {
	background-color: #342f28;
	background-clip: content-box;
}
/* 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;
}

/* QA 2026-10-05: the landscape popup cropped a portrait photo to its middle 55% on desktop. The
   photo is fitted whole, and its box is the photo itself, not the slide around it: the hover zoom
   (main.js) measures from that box, and empty margins in it pushed the photo off the cursor. */
.gallery-popup .gallery-popup__slide {
	display: flex;
	align-items: center;
	justify-content: center;
}

.gallery-popup .gallery-popup__img {
	position: relative;
	inset: auto;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: inherit;
}

/* QA 2026-10-06: on a phone the photo fills the popup's width, so the cross sat on it. It moves
   above the popup's box, right-aligned with the photo. */
@media screen and (max-width: 767px) {
	.gallery-popup .gallery-popup__cross {
		top: auto;
		bottom: calc(100% + 8px);
		right: 0;
	}
}

/* QA 2026-10-06: /gallery's filter button (z-index 10001111) stayed above the open photo. */
.gallery-popup__cross-lock .sticky-button {
	z-index: 1;
}

/* QA 2026-10-06: Elfsight's floating rating badge sat under the popup's 40% shade but still read as
   a bright plate below the photo; it is hidden while a photo is open. Its styles load after ours. */
.gallery-popup__cross-lock .es-slide-in-position-container {
	display: none !important;
}

/* The filter button is a <button> now (it was <a href="#">): the browser's own button dress goes,
   so it keeps the size and look the source's .sticky-button rules give it. */
button.sticky-button {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: start;
	cursor: pointer;
	appearance: none;
}

/* 2026-10-06 (Yulia): the source's pointer on the whole .footer-accordion made the gaps between
   the area names look clickable. Only the head (it toggles) and the names keep it. */
.footer-accordion {
	cursor: auto;
}
.footer-accordion__head,
.footer-accordion__body-link {
	cursor: pointer;
}
.footer-accordion__body-link:hover,
.footer-accordion__body-link:focus-visible {
	text-decoration: underline;
}

/* 2026-10-05: the scroll reveals' start state, held only from the head until `load`, when the
   webflow engine has stamped its own (inc/motion.php). Without scripts nothing is hidden. */
.kcg-motion [data-kcg-start-hidden] {
	opacity: 0;
}

/* /special-offers: the offer cards (layout `offers`), Figma 7226:7597 / 7244:468. */
.offers {
	position: relative;
	overflow-x: clip;
	padding-top: 100px;
	padding-bottom: 100px;
}

.offers__wrapper {
	position: relative;
	z-index: 1;
}

.offers__head {
	margin: 24px auto 40px;
	text-align: center;
}

.offers__title {
	max-width: none;
	margin: 0 0 16px;
	color: #151515;
	font-family: Redhatdisplay, sans-serif;
	font-size: 48px;
	font-weight: 400;
	line-height: 1.2;
}

.offers__subtitle {
	max-width: none;
	margin: 0;
	color: #5e5e5e;
	font-family: Manrope, sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
}

.offers__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.offers__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 32px;
	min-height: 307px;
	padding: 32px;
	overflow: hidden;
	border-radius: 32px;
	background-color: #342f28;
	text-align: center;
	isolation: isolate;
}

.offers__card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: rgba(0, 0, 0, 0.5);
}

.offers__card--primary {
	border: 1px solid rgba(69, 40, 10, 0.3);
}

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

.offers__card-badge {
	position: absolute;
	top: 14px;
	right: 14px;
	padding: 3px 16px 4px;
	border-radius: 72px;
	background-color: #f6f3ec;
	color: #342f28;
	font-family: Manrope, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
}

.offers__card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #f6f3ec;
}

.offers__card-icon-img {
	display: block;
	width: 26px;
	height: 26px;
	object-fit: contain;
}

.offers__card-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.offers__card-title {
	margin: 0;
	color: #fff;
	font-family: Redhatdisplay, sans-serif;
	font-size: 32px;
	font-weight: 400;
	line-height: 1.2;
}

.offers__card-subtitle {
	margin: 0;
	color: #fff;
	font-family: Manrope, sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
}

.offers__card-btn {
	width: 100%;
	padding: 16px 32px;
	color: #fff;
	font-family: Manrope, sans-serif;
	text-decoration: none;
}

.offers__card-btn.btn-opacity:hover,
.offers__card-btn.btn-opacity:focus-visible {
	border-color: #f37021;
	background-color: #f37021;
	color: #fff;
}

.offers__bg {
	position: absolute;
	top: 118px;
	right: -107px;
	width: 481px;
	height: 554px;
	pointer-events: none;
}

@media screen and (max-width: 991px) {
	.offers__list {
		grid-template-columns: minmax(0, 1fr);
		max-width: 560px;
		margin: 0 auto;
	}

	.offers__bg {
		top: auto;
		bottom: 0;
		right: auto;
		left: -20px;
	}
}

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

	.offers__head {
		margin: 8px 0 32px;
	}

	.offers__title {
		font-size: 42px;
		line-height: 1.1;
	}
}

/* /contact-us#<offer>: the contact section in its offer dress (layout `contact_offers`,
   Figma 7226:7835 / 7244:2756). main.js sets the class; inc/contact-offers.php hides the
   section from the head until it has. */
.is-contact-offer-pending .contact > .container,
.is-contact-offer-pending .contact__bg {
	visibility: hidden;
}

.is-contact-offer .contact.padding-100 {
	background-color: transparent;
	overflow-x: clip;
}

.is-contact-offer .contact__img-container,
.is-contact-offer .contact__desc {
	display: none;
}

.is-contact-offer .contact__wrapper {
	grid-template-columns: minmax(0, 1fr);
}

.is-contact-offer .contact__content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 564px);
	grid-template-rows: auto auto 1fr;
	grid-template-areas:
		"title form"
		"sub form"
		"photos form";
	column-gap: 40px;
	align-items: start;
}

.is-contact-offer .contact__title {
	grid-area: title;
	max-width: none;
	margin: 0 0 16px;
	font-size: 48px;
	line-height: 1.2;
	text-align: left;
}

.contact-offers__subtitle {
	grid-area: sub;
	margin: 0;
	color: #5e5e5e;
	font-family: Manrope, sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
}

.contact-offers__photos {
	grid-area: photos;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 50px;
}

.contact-offers__photo {
	position: relative;
	flex: 0 1 340px;
	min-width: 0;
	margin: 0;
	aspect-ratio: 340 / 283;
	overflow: hidden;
	border-radius: 24px;
}

.contact-offers__photo--after {
	margin-top: 76px;
}

.contact-offers__photo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.contact-offers__photo-label {
	position: absolute;
	top: 24px;
	left: 24px;
	padding: 8px 20px;
	border-radius: 72px;
	background-color: #f6f3ec;
	color: #342f28;
	font-family: Manrope, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
}

.contact-offers__zoom {
	position: absolute;
	left: 24px;
	bottom: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: #f6f3ec;
	cursor: pointer;
	transition: background-color 0.4s;
}

.contact-offers__zoom:hover,
.contact-offers__zoom:focus-visible {
	background-color: #fff;
}

.is-contact-offer .contact__form-wrapper {
	grid-area: form;
	padding: 40px;
	border-radius: 32px;
	background-color: #f6f3ec;
}

.contact-offers__form-title.estimate-form__title {
	margin: 0 0 24px;
	font-size: 32px;
	line-height: 1.2;
	text-align: center;
}

.is-contact-offer .contact__bg {
	top: 400px;
	left: -136px;
}

@media screen and (max-width: 991px) {
	.is-contact-offer .contact__content {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-template-areas:
			"title"
			"sub"
			"photos"
			"form";
	}

	.is-contact-offer .contact__form-wrapper {
		margin-top: 40px;
	}
}

@media screen and (max-width: 767px) {
	.is-contact-offer .contact__title {
		font-size: 42px;
		line-height: 1.1;
		text-align: center;
	}

	.contact-offers__subtitle {
		text-align: center;
	}

	.contact-offers__photos {
		display: none;
	}

	.is-contact-offer .contact__form-wrapper {
		margin: 32px -15px 0;
		padding: 32px 16px;
	}

	.contact-offers__form-title.estimate-form__title {
		text-align: left;
	}

}

.contact-offers__popup-box .gallery-popup__slide {
	width: 100%;
	height: 100%;
}

.contact-offers__popup-box .gallery-popup__slide[hidden] {
	display: none;
}

.contact-offers__popup-box .gallery-popup__img {
	display: block;
	width: 100%;
	height: 100%;
}

.contact-offers__popup-box .gallery-popup__cross,
.contact-offers__popup-box .gallery-popup__pagination__arrow {
	padding: 0;
	border-style: solid;
}

.contact-offers__popup-box .gallery-popup__cross {
	border: 0;
}

/* Offer widget (inc/offer-widget.php): a wall cabinet — crown, face frame, two shaker doors — whose
   doors swing open on the offer once, then sway now and then, looping by the team lead's wish;
   reduced motion gets the doors open and still. A look is one modifier block (custom properties
   and decorations) plus template-parts/offer-widget-deco-<look>.php. It stands in the first
   screen's hero (kcg_offer_widget_hero()); the open doors stand out ~45px past the card's sides. */
.offer-widget {
	--ow-frame: #f1e7d8;
	--ow-frame-edge: #dccbb2;
	--ow-crown: #e4d5bf;
	--ow-inside: linear-gradient(180deg, #fffaf2, #f2e7d7);
	--ow-ink: #2b2b2b;
	--ow-muted: #4a4a4a;
	--ow-amount: #d65a10;
	--ow-pill-bg: #342f28;
	--ow-pill-ink: #fff;
	--ow-cta-bg: #342f28;
	--ow-cta-ink: #fff;
	--ow-door: #fbf6ee;
	--ow-door-shade: #ece2d2;
	--ow-door-back: #e3d7c4;
	--ow-door-edge: rgba(52, 47, 40, .14);
	--ow-handle: linear-gradient(90deg, #7d838a, #f2f3f5 45%, #a4aab1 60%, #6a7077);
	--ow-frame-w: 10px;
	--ow-open: -104deg;
	position: relative;
	width: 236px;
	font-family: Manrope, sans-serif;
}

.offer-widget.offer-widget--hero {
	z-index: 2;
	margin: 36px auto 0;
}

.grid-hero .offer-widget.offer-widget--hero {
	margin: 28px 0 0 48px;
}

.offer-widget__link {
	display: block;
	color: var(--ow-ink);
	text-decoration: none;
	border-radius: 6px;
}

.offer-widget__link:focus-visible {
	outline: 3px solid #f37021;
	outline-offset: 6px;
}

.offer-widget__cabinet {
	position: relative;
	display: block;
	padding: var(--ow-frame-w);
	border-radius: 4px;
	background: linear-gradient(180deg, var(--ow-frame), var(--ow-frame-edge));
	box-shadow: 0 14px 28px -8px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .06);
	transition: transform .3s;
}

/* The crown moulding on top and the light rail under the cabinet. */
.offer-widget__cabinet::before,
.offer-widget__cabinet::after {
	content: "";
	position: absolute;
	left: -6px;
	right: -6px;
	border-radius: 2px;
	background: var(--ow-crown);
	box-shadow: 0 2px 4px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .45);
}

.offer-widget__cabinet::before {
	top: -9px;
	height: 10px;
}

.offer-widget__cabinet::after {
	bottom: -4px;
	left: -2px;
	right: -2px;
	height: 5px;
}

.offer-widget__link:hover .offer-widget__cabinet {
	transform: translateY(-2px);
}

.offer-widget__inside {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 18px 14px 14px;
	overflow: hidden;
	border-radius: 2px;
	background: var(--ow-inside);
	box-shadow: inset 0 10px 14px -10px rgba(0, 0, 0, .45), inset 6px 0 10px -8px rgba(0, 0, 0, .3), inset -6px 0 10px -8px rgba(0, 0, 0, .3);
	text-align: center;
}

.offer-widget__inside > :not(.offer-widget__deco) {
	position: relative;
	z-index: 1;
}

.offer-widget__eyebrow {
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ow-muted);
}

.offer-widget__amount {
	font-size: 32px;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.01em;
	color: var(--ow-amount);
	text-shadow: var(--ow-amount-glow, none);
}

.offer-widget__text {
	font-size: 14px;
	line-height: 1.35;
	color: var(--ow-ink);
}

.offer-widget__timer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 2px;
	font-variant-numeric: tabular-nums;
}

.offer-widget__timer[hidden],
.offer-widget__days[hidden] {
	display: none;
}

.offer-widget__days {
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--ow-pill-bg);
	color: var(--ow-pill-ink);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
}

.offer-widget__clock {
	font-size: 13px;
	font-weight: 700;
	color: var(--ow-ink);
}

.offer-widget__valid {
	font-size: 12px;
	line-height: 1.3;
	color: var(--ow-muted);
}

.offer-widget__cta {
	margin-top: 2px;
	padding: 7px 16px;
	border-radius: 999px;
	background: var(--ow-cta-bg);
	color: var(--ow-cta-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
}

.offer-widget__doors {
	position: absolute;
	inset: var(--ow-frame-w);
	z-index: 2;
	perspective: 900px;
	perspective-origin: 50% 40%;
	pointer-events: none;
}

/* Light leaking through the gap of the closed doors; it flickers, then goes out as they open. */
.offer-widget__doors::before {
	content: "";
	position: absolute;
	top: 6%;
	bottom: 6%;
	left: 50%;
	width: 2px;
	transform: translateX(-50%);
	background: var(--ow-leak, #ffd28a);
	box-shadow: 0 0 6px 2px var(--ow-leak, #ffd28a), 0 0 18px 4px var(--ow-leak-glow, rgba(255, 190, 90, .55));
	opacity: 0;
}

/* Without the head script's .kcg-ow-js (no JS, or reduced motion) the doors stand open and still.
   With it the cabinet waits closed; main.js adds .is-open once it is scrolled into view: a rattle,
   the doors swing open a second later, then the sway loop (a later animation wins while it runs). */
.kcg-ow-js .offer-widget__doors::before {
	opacity: 1;
	animation: offer-widget-leak .5s ease-in-out infinite alternate;
}

.kcg-ow-js .offer-widget.is-open .offer-widget__doors::before {
	animation: offer-widget-leak .5s ease-in-out infinite alternate, offer-widget-leak-off .3s ease-out 1.1s forwards;
}

.offer-widget__door {
	position: absolute;
	top: 0;
	bottom: 0;
	width: calc(50% - 1px);
	transform-style: preserve-3d;
}

.offer-widget__door--left {
	left: 0;
	transform-origin: 0 50%;
	transform: rotateY(var(--ow-open));
}

.offer-widget__door--right {
	right: 0;
	transform-origin: 100% 50%;
	transform: rotateY(calc(var(--ow-open) * -1));
}

.kcg-ow-js .offer-widget__door {
	transform: none;
}

.kcg-ow-js .offer-widget.is-open .offer-widget__door--left {
	animation: offer-widget-open-left 1.4s cubic-bezier(.3, .65, .2, 1) 1s both, offer-widget-rattle-left .45s ease-in-out .5s, offer-widget-sway-left 9s ease-in-out 2.4s infinite;
}

.kcg-ow-js .offer-widget.is-open .offer-widget__door--right {
	animation: offer-widget-open-right 1.4s cubic-bezier(.3, .65, .2, 1) 1.1s both, offer-widget-rattle-right .45s ease-in-out .55s, offer-widget-sway-right 9s ease-in-out 2.5s infinite;
}

/* The door's own thickness, standing at its free edge. */
.offer-widget__door::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 6px;
	background: linear-gradient(90deg, var(--ow-door-shade), var(--ow-frame-edge));
}

.offer-widget__door--left::after {
	right: 0;
	transform-origin: 100% 50%;
	transform: rotateY(90deg);
}

.offer-widget__door--right::after {
	left: 0;
	transform-origin: 0 50%;
	transform: rotateY(-90deg);
}

.offer-widget__door-face {
	position: absolute;
	inset: 0;
	border-radius: 2px;
	backface-visibility: hidden;
}

.offer-widget__door-face--front {
	background: linear-gradient(180deg, var(--ow-door), var(--ow-door-shade));
	box-shadow: inset 0 0 0 1px var(--ow-door-edge);
}

.offer-widget__door--left .offer-widget__door-face--front {
	box-shadow: inset 0 0 0 1px var(--ow-door-edge), inset -1px 0 0 1px var(--ow-door-edge);
}

.offer-widget__door-face--back {
	background: var(--ow-door-back);
	box-shadow: inset 0 0 0 1px var(--ow-door-edge), inset 0 0 18px rgba(0, 0, 0, .12);
	transform: rotateY(180deg);
}

.offer-widget__door-panel {
	position: absolute;
	inset: 13px 11px;
	border-radius: 1px;
	background: linear-gradient(180deg, var(--ow-door), var(--ow-door-shade));
	box-shadow: inset 2px 2px 3px rgba(0, 0, 0, .14), inset -1px -1px 2px rgba(255, 255, 255, .6), 0 0 0 1px var(--ow-door-edge);
}

/* Bar handles meet in the middle, low on the doors, as on a wall cabinet. */
.offer-widget__handle {
	position: absolute;
	bottom: 12%;
	width: 4px;
	height: 26%;
	border-radius: 2px;
	background: var(--ow-handle);
	box-shadow: 1px 2px 3px rgba(0, 0, 0, .3);
}

.offer-widget__door--left .offer-widget__handle {
	right: 4px;
}

.offer-widget__door--right .offer-widget__handle {
	left: 4px;
}

/* Concealed hinge cups on the inner face, at the hinge edge (the face is turned, so mirrored). */
.offer-widget__hinge {
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: radial-gradient(circle, #c9ccd0 35%, #8d939a 70%);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}

.offer-widget__hinge:first-child {
	top: 12%;
}

.offer-widget__hinge:last-child {
	bottom: 12%;
}

.offer-widget__door--left .offer-widget__hinge {
	right: 5px;
}

.offer-widget__door--right .offer-widget__hinge {
	left: 5px;
}

.offer-widget__deco,
.offer-widget__deco * {
	pointer-events: none;
}

.offer-widget__deco {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.offer-widget__deco > * {
	position: absolute;
	display: block;
}

@keyframes offer-widget-leak {
	from {
		opacity: .55;
	}

	to {
		opacity: 1;
	}
}

@keyframes offer-widget-leak-off {
	to {
		opacity: 0;
	}
}

@keyframes offer-widget-rattle-left {
	0%,
	100% {
		transform: rotateY(0deg);
	}

	20%,
	60% {
		transform: rotateY(-7deg);
	}

	40%,
	80% {
		transform: rotateY(-2deg);
	}
}

@keyframes offer-widget-rattle-right {
	0%,
	100% {
		transform: rotateY(0deg);
	}

	20%,
	60% {
		transform: rotateY(7deg);
	}

	40%,
	80% {
		transform: rotateY(2deg);
	}
}

@keyframes offer-widget-open-left {
	from {
		transform: rotateY(0deg);
	}

	to {
		transform: rotateY(var(--ow-open));
	}
}

@keyframes offer-widget-open-right {
	from {
		transform: rotateY(0deg);
	}

	to {
		transform: rotateY(calc(var(--ow-open) * -1));
	}
}

/* Most of the cycle the doors stand open; now and then a draft swings them in and back. */
@keyframes offer-widget-sway-left {
	0%,
	76%,
	100% {
		transform: rotateY(var(--ow-open));
	}

	83% {
		transform: rotateY(calc(var(--ow-open) + 26deg));
	}

	90% {
		transform: rotateY(calc(var(--ow-open) - 4deg));
	}

	95% {
		transform: rotateY(calc(var(--ow-open) + 8deg));
	}
}

@keyframes offer-widget-sway-right {
	0%,
	76%,
	100% {
		transform: rotateY(calc(var(--ow-open) * -1));
	}

	83% {
		transform: rotateY(calc((var(--ow-open) + 26deg) * -1));
	}

	90% {
		transform: rotateY(calc((var(--ow-open) - 4deg) * -1));
	}

	95% {
		transform: rotateY(calc((var(--ow-open) + 8deg) * -1));
	}
}

/* Default look: a cream shaker cabinet, a puck light inside and sparkles. */
.offer-widget--default .offer-widget__light {
	top: 0;
	left: 12%;
	right: 12%;
	height: 4px;
	border-radius: 0 0 4px 4px;
	background: #ffe2a8;
	box-shadow: 0 0 8px 2px rgba(255, 196, 92, .8);
	animation: offer-widget-pulse 3s ease-in-out infinite;
}

.offer-widget--default .offer-widget__light::after {
	content: "";
	position: absolute;
	top: 4px;
	left: -8%;
	right: -8%;
	height: 70px;
	background: radial-gradient(ellipse at 50% 0, rgba(255, 205, 120, .45), rgba(255, 205, 120, 0) 70%);
}

.offer-widget--default .offer-widget__sparkle {
	width: 10px;
	height: 10px;
	fill: #f6a04d;
	animation: offer-widget-twinkle 2.4s ease-in-out infinite;
}

.offer-widget--default .offer-widget__sparkle--1 {
	top: 30%;
	left: 9%;
}

.offer-widget--default .offer-widget__sparkle--2 {
	top: 20%;
	right: 10%;
	width: 8px;
	height: 8px;
	fill: #ffc56b;
	animation-delay: .8s;
}

.offer-widget--default .offer-widget__sparkle--3 {
	bottom: 18%;
	right: 8%;
	width: 7px;
	height: 7px;
	animation-delay: 1.6s;
}

/* Halloween look: a dark cabinet, glowing eyes, a spider, a cobweb, a pumpkin and a bat. */
.offer-widget--halloween {
	--ow-frame: #342f28;
	--ow-frame-edge: #1d1a16;
	--ow-inside: radial-gradient(ellipse at 50% 110%, #3a2a1c, #16130f 70%);
	--ow-ink: #f6eee4;
	--ow-muted: #d9cbb8;
	--ow-amount: #f37021;
	--ow-pill-bg: #f37021;
	--ow-pill-ink: #16130f;
	--ow-cta-bg: #f37021;
	--ow-cta-ink: #16130f;
	--ow-crown: #241f1a;
	--ow-leak: #ff9a3c;
	--ow-leak-glow: rgba(243, 112, 33, .7);
	--ow-amount-glow: 0 0 14px rgba(243, 112, 33, .55);
	--ow-door: #3d3026;
	--ow-door-shade: #2a2019;
	--ow-door-back: #241c16;
	--ow-door-edge: rgba(243, 112, 33, .45);
	--ow-handle: linear-gradient(90deg, #5a3a1c, #e0a35a 45%, #8a5a2a 60%, #3a2410);
}

.offer-widget--halloween .offer-widget__cabinet {
	box-shadow: 0 14px 28px -8px rgba(0, 0, 0, .5), 0 0 22px rgba(243, 112, 33, .3);
}

.offer-widget--halloween .offer-widget__door-face--front,
.offer-widget--halloween .offer-widget__door-panel {
	background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 2px, rgba(0, 0, 0, .06) 2px 5px), linear-gradient(180deg, var(--ow-door), var(--ow-door-shade));
}

.offer-widget--halloween .offer-widget__web {
	top: 0;
	left: 0;
	width: 52px;
	height: 52px;
	color: rgba(246, 238, 228, .35);
}

.offer-widget--halloween .offer-widget__spider {
	top: -34px;
	right: 14%;
	width: 16px;
	height: 54px;
	color: rgba(246, 238, 228, .45);
	filter: drop-shadow(0 0 2px rgba(243, 112, 33, .8));
	animation: offer-widget-bob 3.2s ease-in-out infinite;
}

.offer-widget--halloween .offer-widget__spider svg,
.offer-widget--halloween .offer-widget__eyes svg {
	display: block;
	width: 100%;
	height: 100%;
}

.offer-widget--halloween .offer-widget__eyes {
	bottom: 12px;
	left: 10px;
	width: 22px;
	height: 8px;
	fill: #ffb347;
	filter: drop-shadow(0 0 3px rgba(255, 160, 50, .9));
	animation: offer-widget-blink 4s infinite;
}

.offer-widget--halloween .offer-widget__pumpkin {
	right: 8px;
	bottom: 8px;
	width: 24px;
	height: 21px;
}

.offer-widget--halloween .offer-widget__pumpkin-face {
	animation: offer-widget-flicker 1.8s ease-in-out infinite;
}

.offer-widget--halloween .offer-widget__bat {
	top: 30%;
	left: 6%;
	width: 22px;
	height: 9px;
	filter: drop-shadow(0 0 2px rgba(243, 112, 33, .7));
	animation: offer-widget-flap 2.6s ease-in-out infinite;
}

/* Falling pieces (snow, petals, leaves): each rests at its own --ow-rest — where reduced motion
   leaves it — and falls from above the top to below the bottom, swaying, while its SVG turns. */
.offer-widget__fall {
	top: var(--ow-rest, 40px);
	animation: offer-widget-fall var(--ow-fall, 10s) linear var(--ow-fall-delay, 0s) infinite;
}

.offer-widget__fall > svg {
	display: block;
	width: 100%;
	height: 100%;
	animation: var(--ow-turn, offer-widget-spin) var(--ow-spin, 8s) linear infinite;
}

/* Christmas look: a green lacquered cabinet tied with a red satin ribbon and a bow; inside, a
   garland of bulbs chasing, a pair of gifts and a sprig of holly. */
.offer-widget--christmas {
	--ow-frame: #245441;
	--ow-frame-edge: #163628;
	--ow-crown: #1a3d2f;
	--ow-inside: radial-gradient(ellipse at 50% 0, #fffaf0, #f6e9d4 75%);
	--ow-amount: #b3261e;
	--ow-pill-bg: #1f4a3a;
	--ow-cta-bg: #b3261e;
	--ow-door: #2b5f49;
	--ow-door-shade: #163628;
	--ow-door-back: #1b4433;
	--ow-door-edge: rgba(214, 178, 94, .55);
	--ow-handle: linear-gradient(90deg, #7a5a1e, #f3d27a 45%, #b8892f 60%, #5e4414);
	--ow-leak: #ffd36b;
	--ow-leak-glow: rgba(255, 196, 80, .75);
}

.offer-widget--christmas .offer-widget__door-face--front,
.offer-widget--christmas .offer-widget__door-panel {
	background: linear-gradient(125deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 38%), linear-gradient(180deg, var(--ow-door), var(--ow-door-shade));
}

/* The ribbon runs across both door fronts, so it parts as they open; the bow rides the left
   door's free edge, which is why that door stacks over the right one. */
.offer-widget--christmas .offer-widget__door--left {
	z-index: 1;
}

.offer-widget--christmas .offer-widget__door-face--front::after {
	content: "";
	position: absolute;
	top: 38%;
	left: 0;
	right: 0;
	height: 13px;
	background: linear-gradient(180deg, #7d1010, #c62a24 18%, #ff6b5e 42%, #d8322b 58%, #a51f1b 82%, #6e0e0e);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

.offer-widget--christmas .offer-widget__door--left .offer-widget__door-face--front::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: calc(38% - 13px);
	right: -27px;
	width: 54px;
	height: 40px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'%3E%3Cpath d='M19 16L12 29l3-1.6L16.6 30 21 17z' fill='%23a51f1b'/%3E%3Cpath d='M21 16l7 13-3-1.6L23.4 30 19 17z' fill='%23a51f1b'/%3E%3Cpath d='M20 14C14 3 2 3 3.4 11.6 4.4 17.6 14 17 20 14z' fill='%23d8322b' stroke='%237d1010' stroke-width='.6'/%3E%3Cpath d='M20 14C26 3 38 3 36.6 11.6 35.6 17.6 26 17 20 14z' fill='%23d8322b' stroke='%237d1010' stroke-width='.6'/%3E%3Cpath d='M18 12.6C14 7.4 8 6.4 6.6 9.4M22 12.6C26 7.4 32 6.4 33.4 9.4' fill='none' stroke='%23ff8a7e' stroke-width='1.2' stroke-linecap='round' opacity='.75'/%3E%3Cpath d='M19 14.8C15 13 9 13.4 6 15M21 14.8C25 13 31 13.4 34 15' fill='none' stroke='%238f1414' stroke-width='.8' opacity='.6'/%3E%3Crect x='16.4' y='10.4' width='7.2' height='7.6' rx='2.2' fill='%23e8453c' stroke='%237d1010' stroke-width='.6'/%3E%3Crect x='17.8' y='11.4' width='2' height='5' rx='1' fill='%23ffa298' opacity='.7'/%3E%3C/svg%3E") center / contain no-repeat;
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
}

.offer-widget--christmas .offer-widget__garland {
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	overflow: visible;
}

.offer-widget--christmas .offer-widget__bulb {
	fill: currentColor;
	animation: offer-widget-bulb 1.8s ease-in-out infinite;
}

.offer-widget--christmas .offer-widget__bulb > circle {
	opacity: .3;
}

.offer-widget--christmas .offer-widget__bulb:nth-of-type(5n + 1) {
	color: #e53935;
}

.offer-widget--christmas .offer-widget__bulb:nth-of-type(5n + 2) {
	color: #f5b52e;
}

.offer-widget--christmas .offer-widget__bulb:nth-of-type(5n + 3) {
	color: #2fa84f;
}

.offer-widget--christmas .offer-widget__bulb:nth-of-type(5n + 4) {
	color: #3d7be0;
}

.offer-widget--christmas .offer-widget__bulb:nth-of-type(5n) {
	color: #ef6c9a;
}

.offer-widget--christmas .offer-widget__bulb:nth-of-type(3n + 2) {
	animation-delay: -1.2s;
}

.offer-widget--christmas .offer-widget__bulb:nth-of-type(3n) {
	animation-delay: -.6s;
}

.offer-widget--christmas .offer-widget__gift {
	left: 7px;
	bottom: 6px;
	width: 31px;
	height: 27px;
	transform-origin: 50% 100%;
	animation: offer-widget-hop 5s ease-in-out infinite;
}

.offer-widget--christmas .offer-widget__holly {
	right: 6px;
	bottom: 6px;
	width: 32px;
	height: 25px;
	transform-origin: 50% 75%;
	animation: offer-widget-rock 4.4s ease-in-out infinite;
}

.offer-widget--christmas .offer-widget__sparkle {
	width: 9px;
	height: 9px;
	fill: #d4a937;
	animation: offer-widget-twinkle 2.8s ease-in-out infinite;
}

.offer-widget--christmas .offer-widget__sparkle--1 {
	top: 38%;
	left: 7px;
}

.offer-widget--christmas .offer-widget__sparkle--2 {
	top: 54%;
	right: 8px;
	width: 7px;
	height: 7px;
	animation-delay: -1.4s;
}

/* Winter look: a frosted cabinet with a snow-capped crown and icicles; inside, a frost vignette,
   icicles with a drip and snowflakes falling at their own pace. */
.offer-widget--winter {
	--ow-frame: #e4eef7;
	--ow-frame-edge: #b9cfe2;
	--ow-crown: linear-gradient(180deg, #fff 0 45%, #d7e6f2 55%);
	--ow-inside: linear-gradient(180deg, #fff, #eef6fc 50%, #dcebf7);
	--ow-ink: #1d2b3a;
	--ow-muted: #3b4f63;
	--ow-amount: #c4500c;
	--ow-pill-bg: #24435f;
	--ow-cta-bg: #24435f;
	--ow-door: #f7fbfe;
	--ow-door-shade: #d4e4f1;
	--ow-door-back: #dbe8f3;
	--ow-door-edge: rgba(60, 100, 140, .22);
	--ow-leak: #f2fbff;
	--ow-leak-glow: rgba(140, 200, 255, .85);
}

.offer-widget--winter .offer-widget__door-face--front::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 9px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 9'%3E%3Cpath d='M0 0H24V1.2L22.6 3.6 21 1.2 19.2 7.6 17.4 1.2 15 3 12.6 1.2 10.6 8.6 8.6 1.2 6.4 4 4.4 1.2 2.6 5.6 1 1.2 0 1.2Z' fill='%23fff' stroke='%23b4d4ec' stroke-width='.5'/%3E%3C/svg%3E") 0 0 / 24px 9px repeat-x;
	filter: drop-shadow(0 1px 1px rgba(60, 110, 160, .25));
}

.offer-widget--winter .offer-widget__door-face--front::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.offer-widget--winter .offer-widget__door--left .offer-widget__door-face--front::after {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath transform='' d='M0 0L24 9M7 2.6L9.5.5M7 2.6L9 6.4M13 4.9L16 2M13 4.9L15.6 8.6M19 7.1L21.4 5M19 7.1L20.8 10M0 0L9 24M2.6 7L.5 9.5M2.6 7L6.4 9M4.9 13L2 16M4.9 13L8.6 15.6M7.1 19L5 21.4M7.1 19L10 20.8M0 0L17 17M6 6L10 4.6M6 6L4.6 10M11 11L15 10M11 11L10 15' fill='none' stroke='%239fc6e6' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") 0 6px / 40px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath transform='matrix(1 0 0 -1 0 40)' d='M0 0L24 9M7 2.6L9.5.5M7 2.6L9 6.4M13 4.9L16 2M13 4.9L15.6 8.6M19 7.1L21.4 5M19 7.1L20.8 10M0 0L9 24M2.6 7L.5 9.5M2.6 7L6.4 9M4.9 13L2 16M4.9 13L8.6 15.6M7.1 19L5 21.4M7.1 19L10 20.8M0 0L17 17M6 6L10 4.6M6 6L4.6 10M11 11L15 10M11 11L10 15' fill='none' stroke='%239fc6e6' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") 0 100% / 34px no-repeat, radial-gradient(circle at 0 0, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 38%), radial-gradient(circle at 0 100%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 32%);
}

.offer-widget--winter .offer-widget__door--right .offer-widget__door-face--front::after {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath transform='matrix(-1 0 0 1 40 0)' d='M0 0L24 9M7 2.6L9.5.5M7 2.6L9 6.4M13 4.9L16 2M13 4.9L15.6 8.6M19 7.1L21.4 5M19 7.1L20.8 10M0 0L9 24M2.6 7L.5 9.5M2.6 7L6.4 9M4.9 13L2 16M4.9 13L8.6 15.6M7.1 19L5 21.4M7.1 19L10 20.8M0 0L17 17M6 6L10 4.6M6 6L4.6 10M11 11L15 10M11 11L10 15' fill='none' stroke='%239fc6e6' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") 100% 6px / 40px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath transform='rotate(180 20 20)' d='M0 0L24 9M7 2.6L9.5.5M7 2.6L9 6.4M13 4.9L16 2M13 4.9L15.6 8.6M19 7.1L21.4 5M19 7.1L20.8 10M0 0L9 24M2.6 7L.5 9.5M2.6 7L6.4 9M4.9 13L2 16M4.9 13L8.6 15.6M7.1 19L5 21.4M7.1 19L10 20.8M0 0L17 17M6 6L10 4.6M6 6L4.6 10M11 11L15 10M11 11L10 15' fill='none' stroke='%239fc6e6' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") 100% 100% / 34px no-repeat, radial-gradient(circle at 100% 0, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 38%), radial-gradient(circle at 100% 100%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 32%);
}

.offer-widget--winter .offer-widget__frost {
	inset: 0;
	background: radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, 0) 58%, rgba(200, 225, 245, .55));
	box-shadow: inset 0 0 14px 2px rgba(170, 210, 240, .5);
	animation: offer-widget-pulse 6s ease-in-out infinite;
}

.offer-widget--winter .offer-widget__crystal {
	top: 0;
	left: 0;
	width: 46px;
	height: 46px;
	fill: none;
	stroke: #a7cbe6;
	stroke-width: .9;
	stroke-linecap: round;
	animation: offer-widget-pulse 5s ease-in-out infinite;
}

.offer-widget--winter .offer-widget__crystal + .offer-widget__crystal {
	top: auto;
	left: auto;
	right: 0;
	bottom: 0;
	transform: rotate(180deg);
	animation-delay: -2.5s;
}

.offer-widget--winter .offer-widget__icicles {
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	fill: #fff;
	stroke: #b9d7ee;
	stroke-width: .6;
	filter: drop-shadow(0 1px 1px rgba(80, 130, 180, .25));
}

.offer-widget--winter .offer-widget__drip {
	top: 9px;
	left: calc(83.5% - 1.5px);
	width: 3px;
	height: 4px;
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
	background: #a9d2f0;
	animation: offer-widget-drip 4.5s ease-in infinite;
}

.offer-widget--winter .offer-widget__flake {
	width: 12px;
	height: 12px;
	color: #8dbbe2;
	--ow-turn: offer-widget-spin;
}

.offer-widget--winter .offer-widget__flake svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.offer-widget--winter .offer-widget__flake circle {
	fill: currentColor;
	stroke: none;
}

.offer-widget--winter .offer-widget__flake--1 {
	--ow-rest: 46px;
	--ow-fall: 11s;
	--ow-fall-delay: -2s;
	--ow-spin: 9s;
	--ow-sway: 8px;
	left: 4%;
	width: 15px;
	height: 15px;
	color: #7fb0dc;
}

.offer-widget--winter .offer-widget__flake--2 {
	--ow-rest: 128px;
	--ow-fall: 8s;
	--ow-fall-delay: -5s;
	--ow-spin: 6s;
	left: 15%;
	width: 9px;
	height: 9px;
}

.offer-widget--winter .offer-widget__flake--3 {
	--ow-rest: 150px;
	--ow-fall: 13s;
	--ow-fall-delay: -9s;
	--ow-spin: 12s;
	--ow-sway: 10px;
	left: 30%;
	width: 12px;
	height: 12px;
	color: #a9cdea;
}

.offer-widget--winter .offer-widget__flake--4 {
	--ow-rest: 8px;
	--ow-fall: 9.5s;
	--ow-fall-delay: -1s;
	--ow-spin: 7s;
	left: 48%;
	width: 8px;
	height: 8px;
	color: #9cc6e8;
}

.offer-widget--winter .offer-widget__flake--5 {
	--ow-rest: 136px;
	--ow-fall: 12s;
	--ow-fall-delay: -6.5s;
	--ow-spin: 10s;
	--ow-sway: -8px;
	left: 66%;
	width: 13px;
	height: 13px;
}

.offer-widget--winter .offer-widget__flake--6 {
	--ow-rest: 60px;
	--ow-fall: 8.5s;
	--ow-fall-delay: -3.5s;
	--ow-spin: 5.5s;
	left: 80%;
	width: 10px;
	height: 10px;
	color: #a9cdea;
}

.offer-widget--winter .offer-widget__flake--7 {
	--ow-rest: 98px;
	--ow-fall: 10.5s;
	--ow-fall-delay: -8s;
	--ow-spin: 8s;
	--ow-sway: 6px;
	left: 90%;
	width: 14px;
	height: 14px;
	color: #7fb0dc;
}

.offer-widget--winter .offer-widget__flake:nth-of-type(even) > svg {
	animation-direction: reverse;
}

/* Spring look: a sage cabinet with cream doors; inside, a blossoming branch swaying from the
   corner, petals drifting down and a butterfly. */
.offer-widget--spring {
	--ow-frame: #b4c6a3;
	--ow-frame-edge: #94aa82;
	--ow-crown: #a5b993;
	--ow-inside: linear-gradient(180deg, #fffcf5, #f6efe2);
	--ow-pill-bg: #3d5a33;
	--ow-cta-bg: #3d5a33;
	--ow-door: #fdf9ef;
	--ow-door-shade: #ece3cf;
	--ow-door-back: #e6dcc6;
	--ow-door-edge: rgba(80, 100, 60, .22);
	--ow-handle: linear-gradient(90deg, #8a6a32, #f0d9a0 45%, #b89656 60%, #6e5226);
	--ow-leak: #ffe0cc;
	--ow-leak-glow: rgba(255, 160, 170, .65);
}

.offer-widget--spring .offer-widget__branch {
	left: 0;
	bottom: 0;
	width: 40px;
	height: 80px;
	transform-origin: 0 100%;
	animation: offer-widget-sway 6s ease-in-out infinite;
}

.offer-widget--spring .offer-widget__blossom {
	fill: #f8c4d2;
	stroke: #eaa0b5;
	stroke-width: .4;
	transform-box: fill-box;
	transform-origin: center;
	animation: offer-widget-bloom 4s ease-in-out infinite;
}

.offer-widget--spring .offer-widget__blossom:nth-of-type(even) {
	fill: #fde4eb;
	animation-delay: -2s;
}

.offer-widget--spring .offer-widget__petal {
	width: 9px;
	height: 11px;
	fill: #f7bfd0;
	--ow-turn: offer-widget-tumble;
}

.offer-widget--spring .offer-widget__petal--1 {
	--ow-rest: 30px;
	--ow-fall: 12s;
	--ow-fall-delay: -3s;
	--ow-spin: 5s;
	--ow-sway: 12px;
	left: 26%;
}

.offer-widget--spring .offer-widget__petal--2 {
	--ow-rest: 118px;
	--ow-fall: 10s;
	--ow-fall-delay: -7s;
	--ow-spin: 4s;
	--ow-sway: -10px;
	left: 44%;
	width: 7px;
	height: 9px;
	fill: #fbd6e1;
}

.offer-widget--spring .offer-widget__petal--3 {
	--ow-rest: 150px;
	--ow-fall: 13s;
	--ow-fall-delay: -1s;
	--ow-spin: 6s;
	--ow-sway: 14px;
	left: 62%;
	fill: #f2a3ba;
}

.offer-widget--spring .offer-widget__petal--4 {
	--ow-rest: 70px;
	--ow-fall: 11s;
	--ow-fall-delay: -9.5s;
	--ow-spin: 4.5s;
	left: 78%;
	width: 8px;
	height: 10px;
	fill: #fbd6e1;
}

.offer-widget--spring .offer-widget__petal--5 {
	--ow-rest: 160px;
	--ow-fall: 9s;
	--ow-fall-delay: -4.5s;
	--ow-spin: 3.6s;
	--ow-sway: -12px;
	left: 90%;
	width: 7px;
	height: 9px;
}

.offer-widget--spring .offer-widget__petal--6 {
	--ow-rest: 6px;
	--ow-fall: 14s;
	--ow-fall-delay: -11s;
	--ow-spin: 5.5s;
	left: 10%;
	fill: #f2a3ba;
}

.offer-widget--spring .offer-widget__butterfly {
	top: 78px;
	right: 8px;
	width: 22px;
	height: 18px;
	animation: offer-widget-flutter 14s ease-in-out infinite;
}

.offer-widget--spring .offer-widget__butterfly svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.offer-widget--spring .offer-widget__wing {
	transform-origin: 11px 8px;
	animation: offer-widget-wings .32s ease-in-out infinite alternate;
}

/* Summer look: a warm white cabinet with sky-blue doors; inside, a sky, a sun with turning rays,
   clouds drifting by and a sweep of light. */
.offer-widget--summer {
	--ow-frame: #fbf8f1;
	--ow-frame-edge: #e3d9c6;
	--ow-crown: #f1e9da;
	--ow-inside: linear-gradient(180deg, #bfe3f6, #dcf0f8 45%, #fff5e3);
	--ow-ink: #1f2d3a;
	--ow-muted: #2f4558;
	--ow-amount: #b84a0a;
	--ow-pill-bg: #0e5a7a;
	--ow-cta-bg: #0e5a7a;
	--ow-door: #a9dbf2;
	--ow-door-shade: #6fb7dc;
	--ow-door-back: #8cc8e6;
	--ow-door-edge: rgba(15, 70, 110, .25);
	--ow-leak: #fff27a;
	--ow-leak-glow: rgba(255, 214, 60, .85);
}

.offer-widget--summer .offer-widget__door-face--front,
.offer-widget--summer .offer-widget__door-panel {
	background: linear-gradient(135deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, var(--ow-door), var(--ow-door-shade));
}

.offer-widget--summer .offer-widget__sun {
	top: -18px;
	right: -18px;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 214, 80, .6), rgba(255, 214, 80, 0) 68%);
	animation: offer-widget-pulse 4s ease-in-out infinite;
}

.offer-widget--summer .offer-widget__sun svg {
	display: block;
	width: 100%;
	height: 100%;
}

.offer-widget--summer .offer-widget__rays {
	fill: #ffc83d;
	animation: offer-widget-spin 30s linear infinite;
}

.offer-widget--summer .offer-widget__cloud {
	--ow-rest-x: 18px;
	top: 7px;
	left: var(--ow-rest-x);
	width: 36px;
	height: 16px;
	fill: #fff;
	filter: drop-shadow(0 1px 1px rgba(60, 120, 160, .2));
	animation: offer-widget-drift 32s linear -12s infinite;
}

.offer-widget--summer .offer-widget__cloud--2 {
	--ow-rest-x: 150px;
	top: 40px;
	width: 26px;
	height: 12px;
	opacity: .9;
	animation-duration: 44s;
	animation-delay: -30s;
}

.offer-widget--summer .offer-widget__cloud svg {
	display: block;
	width: 100%;
	height: 100%;
}

.offer-widget--summer .offer-widget__shimmer {
	top: 0;
	bottom: 0;
	left: 0;
	width: 55%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0));
	transform: translateX(-120%);
	animation: offer-widget-shimmer 8s ease-in-out 1s infinite;
}

.offer-widget--summer .offer-widget__sparkle {
	width: 8px;
	height: 8px;
	fill: #f5b31f;
	animation: offer-widget-twinkle 2.6s ease-in-out infinite;
}

.offer-widget--summer .offer-widget__sparkle--1 {
	left: 9px;
	bottom: 24%;
}

.offer-widget--summer .offer-widget__sparkle--2 {
	right: 10px;
	bottom: 30%;
	width: 6px;
	height: 6px;
	animation-delay: -.9s;
}

.offer-widget--summer .offer-widget__sparkle--3 {
	left: 12px;
	top: 44%;
	width: 6px;
	height: 6px;
	animation-delay: -1.8s;
}

/* Autumn look: an oak cabinet with its grain; inside, leaves falling and turning, a few fallen
   ones and an acorn. */
.offer-widget--autumn {
	--ow-frame: #a8723f;
	--ow-frame-edge: #7f5128;
	--ow-crown: #8e5d30;
	--ow-inside: linear-gradient(180deg, #fff9ee, #f4e4cc);
	--ow-muted: #4a3f35;
	--ow-amount: #c2500c;
	--ow-pill-bg: #6b3a17;
	--ow-cta-bg: #6b3a17;
	--ow-door: #c99058;
	--ow-door-shade: #a5703e;
	--ow-door-back: #b07a46;
	--ow-door-edge: rgba(60, 30, 10, .35);
	--ow-handle: linear-gradient(90deg, #1b1b1b, #5a5a5a 45%, #2a2a2a 60%, #111);
	--ow-leak: #ffb347;
	--ow-leak-glow: rgba(255, 140, 30, .75);
}

.offer-widget--autumn .offer-widget__cabinet {
	background: repeating-linear-gradient(90deg, rgba(74, 40, 16, .08) 0 1px, rgba(74, 40, 16, 0) 1px 6px), linear-gradient(180deg, var(--ow-frame), var(--ow-frame-edge));
}

.offer-widget--autumn .offer-widget__door-face--front,
.offer-widget--autumn .offer-widget__door-panel {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 160' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%234a2810' stroke-width='.8'%3E%3Cpath d='M5 0C8 30 2 60 6 90S4 140 7 160M14 0C16 40 11 70 15 100S12 140 14 160M46 0C49 40 43 80 47 120S45 150 48 160M55 0C53 30 58 70 54 110S57 150 55 160' stroke-opacity='.2'/%3E%3Cpath d='M22 160C22 118 26 98 30 88 34 98 38 118 38 160M25.5 160C25.5 124 28 106 30 99 32 106 34.5 124 34.5 160M28.4 160C28.4 130 29.2 116 30 110 30.8 116 31.6 130 31.6 160M19 160C19 110 24 84 30 74 36 84 41 110 41 160' stroke-opacity='.18'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat, repeating-linear-gradient(90deg, rgba(74, 40, 16, .07) 0 1px, rgba(74, 40, 16, 0) 1px 5px, rgba(255, 230, 190, .06) 5px 7px, rgba(74, 40, 16, 0) 7px 11px), linear-gradient(180deg, var(--ow-door), var(--ow-door-shade));
}

.offer-widget--autumn .offer-widget__leaf {
	width: 17px;
	height: 17px;
	fill: #d9541e;
	--ow-turn: offer-widget-tumble;
}

.offer-widget--autumn .offer-widget__vein {
	fill: none;
	stroke: rgba(90, 30, 10, .45);
	stroke-width: .6;
	stroke-linecap: round;
}

.offer-widget--autumn .offer-widget__leaf--1 {
	--ow-rest: 40px;
	--ow-fall: 11s;
	--ow-fall-delay: -2s;
	--ow-spin: 6s;
	--ow-sway: 12px;
	left: 3%;
	width: 20px;
	height: 20px;
	fill: #b8321e;
}

.offer-widget--autumn .offer-widget__leaf--2 {
	--ow-rest: 120px;
	--ow-fall: 9s;
	--ow-fall-delay: -6s;
	--ow-spin: 5s;
	--ow-sway: -10px;
	left: 18%;
	fill: #d99a1e;
}

.offer-widget--autumn .offer-widget__leaf--3 {
	--ow-rest: 8px;
	--ow-fall: 12.5s;
	--ow-fall-delay: -9s;
	--ow-spin: 7s;
	left: 34%;
	width: 15px;
	height: 15px;
}

.offer-widget--autumn .offer-widget__leaf--4 {
	--ow-rest: 146px;
	--ow-fall: 10s;
	--ow-fall-delay: -3.5s;
	--ow-spin: 4.5s;
	--ow-sway: 14px;
	left: 54%;
	width: 19px;
	height: 19px;
	fill: #c76b1a;
}

.offer-widget--autumn .offer-widget__leaf--5 {
	--ow-rest: 64px;
	--ow-fall: 11.5s;
	--ow-fall-delay: -7.5s;
	--ow-spin: 6.5s;
	--ow-sway: -12px;
	left: 72%;
	fill: #b8321e;
}

.offer-widget--autumn .offer-widget__leaf--6 {
	--ow-rest: 104px;
	--ow-fall: 9.5s;
	--ow-fall-delay: -1s;
	--ow-spin: 5.5s;
	left: 87%;
	width: 16px;
	height: 16px;
	fill: #d99a1e;
}

.offer-widget--autumn .offer-widget__leaf--7 {
	--ow-rest: 168px;
	--ow-fall: 13s;
	--ow-fall-delay: -11s;
	--ow-spin: 8s;
	--ow-sway: 10px;
	left: 42%;
	width: 14px;
	height: 14px;
	fill: #e08a1e;
}

.offer-widget--autumn .offer-widget__litter {
	left: 4px;
	bottom: 3px;
	width: 40px;
	height: 16px;
	transform-origin: 50% 100%;
	animation: offer-widget-rock 5s ease-in-out infinite;
}

.offer-widget--autumn .offer-widget__acorn {
	right: 10px;
	bottom: 5px;
	width: 18px;
	height: 23px;
	transform-origin: 50% 100%;
	animation: offer-widget-rock 3.6s ease-in-out infinite;
}

/* 4th of July look: a navy cabinet with white stars on its doors; inside, fireworks bursting in
   turn and stars twinkling. */
.offer-widget--independence {
	--ow-frame: #22325a;
	--ow-frame-edge: #141f3b;
	--ow-crown: #19264a;
	--ow-inside: linear-gradient(180deg, #fffaf2, #f3eadb);
	--ow-ink: #1f2433;
	--ow-muted: #3a4152;
	--ow-pill-bg: #1d2b4f;
	--ow-cta-bg: #b22234;
	--ow-door: #2b3e6c;
	--ow-door-shade: #1a2747;
	--ow-door-back: #1c2a4a;
	--ow-door-edge: rgba(255, 255, 255, .26);
	--ow-leak: #fff;
	--ow-leak-glow: rgba(210, 225, 255, .9);
}

.offer-widget--independence .offer-widget__door-face--front::after {
	content: "";
	position: absolute;
	top: 20%;
	left: 18%;
	right: 18%;
	height: 26px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cg fill='%23fff'%3E%3Cpath transform='translate(14 1) scale(1.2)' d='M5 0l1.2 3.4H10L6.9 5.6 8.1 9 5 6.9 1.9 9 3.1 5.6 0 3.4h3.8z'/%3E%3Cpath transform='translate(3 6) scale(.75)' d='M5 0l1.2 3.4H10L6.9 5.6 8.1 9 5 6.9 1.9 9 3.1 5.6 0 3.4h3.8z' opacity='.85'/%3E%3Cpath transform='translate(29.5 6) scale(.75)' d='M5 0l1.2 3.4H10L6.9 5.6 8.1 9 5 6.9 1.9 9 3.1 5.6 0 3.4h3.8z' opacity='.85'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.offer-widget--independence .offer-widget__door-face--front::before {
	content: "";
	position: absolute;
	z-index: 1;
	left: 11px;
	right: 11px;
	bottom: 6px;
	height: 3px;
	background: linear-gradient(180deg, #c8102e 0 33%, #fff 33% 66%, #c8102e 66%);
	opacity: .9;
}

.offer-widget--independence .offer-widget__burst {
	--ow-delay: 0s;
	top: -3px;
	left: -3px;
	width: 42px;
	height: 42px;
	color: #c8102e;
	fill: #2b4fa8;
	animation: offer-widget-burst 3.3s ease-out var(--ow-delay) infinite;
}

.offer-widget--independence .offer-widget__burst svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.offer-widget--independence .offer-widget__burst-rays {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
}

.offer-widget--independence .offer-widget__burst-dots {
	animation: offer-widget-sparks 3.3s ease-in var(--ow-delay) infinite;
}

.offer-widget--independence .offer-widget__burst-core {
	fill: currentColor;
}

.offer-widget--independence .offer-widget__burst--2 {
	--ow-delay: -2.2s;
	top: -5px;
	left: auto;
	right: -6px;
	width: 46px;
	height: 46px;
	color: #2b4fa8;
	fill: #c8102e;
}

.offer-widget--independence .offer-widget__burst--3 {
	--ow-delay: -1.1s;
	top: 44%;
	left: auto;
	right: 4px;
	width: 34px;
	height: 34px;
	color: #c8102e;
	fill: #d4a017;
}

.offer-widget--independence .offer-widget__star {
	width: 9px;
	height: 9px;
	fill: #1d2b4f;
	animation: offer-widget-twinkle 2.4s ease-in-out infinite;
}

.offer-widget--independence .offer-widget__star svg {
	display: block;
	width: 100%;
	height: 100%;
}

.offer-widget--independence .offer-widget__star--1 {
	top: 44%;
	left: 8px;
}

.offer-widget--independence .offer-widget__star--2 {
	top: 64px;
	left: 46px;
	width: 6px;
	height: 6px;
	fill: #c8102e;
	animation-delay: -.6s;
}

.offer-widget--independence .offer-widget__star--3 {
	bottom: 14px;
	left: 12px;
	fill: #c8102e;
	animation-delay: -1.2s;
}

.offer-widget--independence .offer-widget__star--4 {
	right: 14px;
	bottom: 16px;
	width: 7px;
	height: 7px;
	animation-delay: -1.8s;
}

.offer-widget--independence .offer-widget__star--5 {
	top: 6px;
	left: 50%;
	width: 6px;
	height: 6px;
	fill: #c8102e;
	animation-delay: -.3s;
}

@keyframes offer-widget-pulse {
	0%,
	100% {
		opacity: .6;
	}

	50% {
		opacity: 1;
	}
}

@keyframes offer-widget-twinkle {
	0%,
	100% {
		opacity: .15;
		transform: scale(.4) rotate(0deg);
	}

	50% {
		opacity: 1;
		transform: scale(1) rotate(45deg);
	}
}

@keyframes offer-widget-bob {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(12px);
	}
}

@keyframes offer-widget-blink {
	0%,
	88%,
	100% {
		transform: scaleY(1);
	}

	92% {
		transform: scaleY(.1);
	}

	96% {
		transform: scaleY(1);
	}
}

@keyframes offer-widget-flicker {
	0%,
	100% {
		opacity: 1;
	}

	40% {
		opacity: .65;
	}

	60% {
		opacity: .9;
	}
}

@keyframes offer-widget-flap {
	0%,
	100% {
		transform: translate(0, 0) scaleY(1);
	}

	25% {
		transform: translate(3px, -3px) scaleY(.5);
	}

	50% {
		transform: translate(6px, 0) scaleY(1);
	}

	75% {
		transform: translate(3px, 2px) scaleY(.5);
	}
}

@keyframes offer-widget-fall {
	0% {
		opacity: 0;
		transform: translate(0, calc(-24px - var(--ow-rest, 40px)));
	}

	6%,
	90% {
		opacity: 1;
	}

	25% {
		transform: translate(var(--ow-sway, 6px), calc(47px - var(--ow-rest, 40px)));
	}

	50% {
		transform: translate(0, calc(118px - var(--ow-rest, 40px)));
	}

	75% {
		transform: translate(calc(var(--ow-sway, 6px) * -1), calc(189px - var(--ow-rest, 40px)));
	}

	100% {
		opacity: 0;
		transform: translate(0, calc(260px - var(--ow-rest, 40px)));
	}
}

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

@keyframes offer-widget-tumble {
	from {
		transform: rotate(0deg) rotateY(0deg);
	}

	to {
		transform: rotate(360deg) rotateY(360deg);
	}
}

@keyframes offer-widget-bulb {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: .3;
	}
}

@keyframes offer-widget-hop {
	0%,
	70%,
	92%,
	100% {
		transform: none;
	}

	76% {
		transform: scaleY(.92);
	}

	82% {
		transform: translateY(-4px) scaleY(1.04);
	}

	88% {
		transform: scaleY(.96);
	}
}

@keyframes offer-widget-rock {
	0%,
	100% {
		transform: rotate(-4deg);
	}

	50% {
		transform: rotate(4deg);
	}
}

@keyframes offer-widget-drip {
	0% {
		opacity: 0;
		transform: scale(.3);
	}

	50%,
	62% {
		opacity: 1;
		transform: none;
	}

	80%,
	100% {
		opacity: 0;
		transform: translateY(46px);
	}
}

@keyframes offer-widget-sway {
	0%,
	100% {
		transform: rotate(-1.5deg);
	}

	50% {
		transform: rotate(2.5deg);
	}
}

@keyframes offer-widget-bloom {
	0%,
	100% {
		transform: none;
	}

	50% {
		transform: scale(1.12);
	}
}

@keyframes offer-widget-flutter {
	0%,
	100% {
		transform: none;
	}

	15% {
		transform: translate(-6px, -18px) rotate(-12deg);
	}

	30% {
		transform: translate(2px, -26px) rotate(8deg);
	}

	45% {
		transform: translate(-10px, -12px) rotate(-6deg);
	}

	60% {
		transform: translate(-2px, 16px) rotate(10deg);
	}

	75% {
		transform: translate(-8px, 36px) rotate(-8deg);
	}

	88% {
		transform: translate(0, 18px) rotate(4deg);
	}
}

@keyframes offer-widget-wings {
	to {
		transform: scaleX(.3);
	}
}

@keyframes offer-widget-drift {
	from {
		transform: translateX(calc(-50px - var(--ow-rest-x, 0px)));
	}

	to {
		transform: translateX(calc(240px - var(--ow-rest-x, 0px)));
	}
}

@keyframes offer-widget-shimmer {
	0% {
		transform: translateX(-120%);
	}

	40%,
	100% {
		transform: translateX(320%);
	}
}

@keyframes offer-widget-burst {
	0% {
		opacity: 0;
		transform: scale(.2);
	}

	6% {
		opacity: 1;
	}

	34% {
		opacity: 1;
		transform: none;
	}

	60%,
	100% {
		opacity: 0;
		transform: scale(1.06);
	}
}

@keyframes offer-widget-sparks {
	0%,
	34% {
		transform: none;
	}

	60%,
	100% {
		transform: translateY(3px);
	}
}

@media screen and (max-width: 767px) {
	.offer-widget {
		width: 210px;
	}

	.offer-widget.offer-widget--hero,
	.grid-hero .offer-widget.offer-widget--hero {
		margin: 28px auto 0;
	}
}

@media screen and (max-width: 479px) {
	.offer-widget {
		--ow-frame-w: 8px;
		width: 250px;
	}

	.offer-widget__inside {
		gap: 5px;
		padding: 16px 10px 12px;
	}

	.offer-widget__eyebrow {
		font-size: 11px;
		letter-spacing: .08em;
	}

	.offer-widget__amount {
		font-size: 30px;
	}

	.offer-widget__text {
		font-size: 14px;
		line-height: 1.35;
	}

	.offer-widget__days {
		padding: 2px 8px;
		font-size: 12px;
	}

	.offer-widget__clock {
		font-size: 13px;
	}

	.offer-widget__valid {
		font-size: 12px;
	}

	.offer-widget__cta {
		padding: 8px 18px;
		font-size: 14px;
	}

	.offer-widget__door-panel {
		inset: 9px 7px;
	}

	.offer-widget__hinge {
		width: 9px;
		height: 9px;
	}

	.offer-widget--halloween .offer-widget__web {
		width: 38px;
		height: 38px;
	}

	.offer-widget--christmas .offer-widget__door-face--front::after {
		height: 10px;
	}

	.offer-widget--christmas .offer-widget__door--left .offer-widget__door-face--front::before {
		top: calc(38% - 10px);
		right: -20px;
		width: 40px;
		height: 30px;
	}

	.offer-widget--christmas .offer-widget__gift {
		left: 5px;
		bottom: 4px;
		width: 23px;
		height: 20px;
	}

	.offer-widget--christmas .offer-widget__holly {
		right: 4px;
		bottom: 4px;
		width: 24px;
		height: 19px;
	}

	.offer-widget--winter .offer-widget__crystal {
		width: 34px;
		height: 34px;
	}

	.offer-widget--winter .offer-widget__door--left .offer-widget__door-face--front::after,
	.offer-widget--winter .offer-widget__door--right .offer-widget__door-face--front::after {
		background-size: 28px, 24px, auto, auto;
	}

	.offer-widget--winter .offer-widget__drip {
		top: 7px;
	}

	.offer-widget--spring .offer-widget__branch {
		width: 30px;
		height: 60px;
	}

	.offer-widget--spring .offer-widget__butterfly {
		top: 60px;
		right: 5px;
		width: 17px;
		height: 14px;
	}

	.offer-widget--summer .offer-widget__sun {
		top: -14px;
		right: -14px;
		width: 46px;
		height: 46px;
	}

	.offer-widget--summer .offer-widget__cloud {
		width: 28px;
		height: 12px;
	}

	.offer-widget--summer .offer-widget__cloud--2 {
		--ow-rest-x: 110px;
		top: 30px;
		width: 20px;
		height: 9px;
	}

	.offer-widget--autumn .offer-widget__litter {
		width: 30px;
		height: 12px;
	}

	.offer-widget--autumn .offer-widget__acorn {
		right: 6px;
		bottom: 4px;
		width: 14px;
		height: 18px;
	}

	.offer-widget--independence .offer-widget__burst {
		top: -5px;
		left: -5px;
		width: 30px;
		height: 30px;
	}

	.offer-widget--independence .offer-widget__burst--2 {
		top: -7px;
		left: auto;
		right: -8px;
		width: 34px;
		height: 34px;
	}

	.offer-widget--independence .offer-widget__star--1 {
		top: auto;
		bottom: 36%;
		left: 5px;
	}

	.offer-widget--independence .offer-widget__burst--3 {
		top: 44%;
		left: auto;
		width: 26px;
		height: 26px;
	}

	.offer-widget--independence .offer-widget__star--2 {
		top: 48px;
		left: 30px;
	}
}

@media screen and (max-width: 359px) {
	.offer-widget {
		width: 224px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.offer-widget__deco *,
	.offer-widget__deco *::after {
		animation: none;
	}
}

.offer-widget-demo {
	padding: calc(var(--kcg-header-h, 128px) + 40px) 0 80px;
	overflow-x: clip;
}

.offer-widget-demo__title {
	max-width: none;
	margin: 0 0 100px;
	text-align: center;
}

.offer-widget-demo__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 56px 100px;
	margin: 0 0 56px;
	padding: 0;
	list-style: none;
}

.offer-widget-demo__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.offer-widget-demo__name {
	font-size: 18px;
	font-weight: 700;
}

.offer-widget-demo__subtitle {
	margin: 0 0 16px;
	font-size: 22px;
}

.offer-widget-demo__links {
	margin: 0;
	padding-left: 20px;
}

.offer-widget-demo__link {
	display: inline-block;
	padding: 6px 0;
	color: #1a1a1a;
	text-decoration: underline;
	overflow-wrap: anywhere;
}

@media screen and (max-width: 767px) {
	.offer-widget-demo__grid {
		flex-direction: column;
		align-items: center;
		padding: 0;
	}
}

.hero-subtitle-block__authors {
	display: flex;
	flex-direction: column;
	gap: 4px;
	white-space: nowrap;
}

/* Cancels the wrapper's 5px column gap, so the comma sits against the name. */
.hero-subtitle-block__role {
	margin-left: -5px;
}